This project is a React web application that follows the atomic design folder structure. It uses React.js with Create React App, Styled Components for styling, React Icons for icons, React Router Dom for routing, and has unit testing implemented. The app is also responsive, utilizing grid and flexbox, and has clean code.
The app's folder structure follows the atomic design pattern, with components organized into atoms, molecules, organisms, and screens.
1- React.js: A popular JavaScript library for building user interfaces.
2- Create React App: A tool to set up a modern web app by running one command.
3- Styled Components: A CSS-in-JS library that allows you to write CSS directly in your JavaScript files.
4- React Icons: A collection of icons for React projects.
5- React Router Dom: A library that allows for easy routing between different pages of the app.
6- Jest: A JavaScript testing framework used for unit testing.
The app is designed to be fully responsive and uses both grid and flexbox to achieve this. Media queries are used to adjust the layout for different screen sizes.
The app is built with clean and maintainable code, with a focus on readability and reusability. Code is organized into small and reusable components, and is well-documented and tested.
To run the project, follow these steps:
1- Clone the repository to your local machine.
2- Install the necessary dependencies by running npm install.
3- Start the development server by running npm start.
4- Open your browser and navigate to http://localhost:3000/ to view the app.
5- To run the unit tests, run npm test in the terminal.
1- This React app follows the atomic design folder structure and uses vanilla solutions to achieve responsive design, clean code, and unit testing. With its well-organized components and clean code, it is easy to maintain and update.
2- For Testing, I didn't test organisms or screens, as I tested the components that combine them already, and I added tests for the organisms that doesn't have any of the molecules or atoms.