All solutions

What are you most proud of, and what would you do differently next time?

1. In this project I used MongoDb Atlas for the first time so that the docs could be stored there. I had to learn how to use it and how to connect it to my project.
2. I also used Vercel Functions to create a serverless api to handle the requests to the database (/save, /delete, etc.) This was also a first for me.
3. I created an architecture for the project that is easy to understand and navigate. I have a separate folder for the components, hooks and utils functions.
4. I'm using createSlice from Redux Toolkit to manage the state of the app. It is better because it is more concise and easier to understand than the traditional Redux.

Since this app is more for learning purposes, I have added a limit of 5 notes that can be created. Potentially in the future I could add a login system and a way to save more notes for particular users.

What challenges did you encounter, and how did you overcome them?

Challenges and how to overcome them:

1. The first challenge was to find a way how to save docs. I could use a local storage but I wanted to work with a database. I found MongoDb Atlas to be very popular.
2. The second challenge was to create a serverless api to handle the requests to the database. I used Vercel Functions for this.
3. Other challenges include creating more elegant way to handle styles changes for the theme switcher and to make the app more responsive since the layout is different on desktop/mobile.

I see a potentially ways to refactor the project more and will be updating it as the time goes.

What specific areas of your project would you like help with?

1. What do you like about the project?
2. What can be done better?

A simple HTML/CSS/JS website featuring 4 pages with sliders on each.

My goal was to not use any external libraries but work with simplest of tools. I achieved all the requirements but the slider animation can be added in the future.

If I was doing this project for a client I would definitely go with some JS frameworks to at least make the navigation and components more scalable and not just copy-pasting.

Thanks!

• This app was developed using React, TS and MUI. This combination allows for a fast and responsive app as well as a clean and maintainable codebase.
• Utilized useContext for state management in the app, eliminating the need for prop drilling.
• Paid attention to component naming and structure, as well as the use of hooks and the separation of concerns.
• Applied linting and formatting rules to ensure a clean and consistent codebase.

Question to community:

• How did you handle the 'Apply' button? I struggled with it a bit because of the <Dialog> component handling overflow property and hiding child component beyond it's boundaries. I would like to know how you handled it.
• How would you handle the timer? I used setInterval because it's simple, and it works, but I'm not sure if it's the best way to handle it.

A simple task of creating a blog post card with interactive elements.

An Interactive Credit Card Form is a React application that allows users to enter their credit card information and submit the form. The form is validated and the user is notified of any errors. The form is responsive and will adapt to different screen sizes.

• A MUI theme is used to create custom styles for components such as Button, Textfield and Input to ensure consistency in the design.
• I use Formik and Yup library for the fields validation.
• The project has a clear folder structure and is easy to navigate. I use TypeScript to ensure type safety and to make the code more readable and potentially scalable.

Difficulties in project building

• Creating a gradient outline for the fields on focus was a challenge since it is not a standard feature of CSS. I had to use a combination of pseudo-element and detailed selectors to achieve the desired effect.
• The Grid system in MUI is not fully customizable, so I used my own CSS to override the default styles.
• I achieved responsive design by using MUI media queries, and it's grid system.

Please, let me know if you have any questions or feedback.