This Frontend Project is made by using React JS. All the good practices are implemented while making this App.
- Proper folder structure is used to isolate all the components and pages from each other.
- For Components and Pages files, JSX extension is used, so that we can separate components and Pages from other JS Files.
- Modular SCSS is used, so that no style classes overlap with each other.
- Each folder is named after individual Page/Component and further each file contains.
- ComponentName.jsx
- ComponentName.module.scss
src folder contains all the main files and folder
Further src folder is divided into 6 sections :-
-
Components => It contains all the components that are required on different Pages.
-
Contexts => It contains the context that are to be managed inside the different components. Basically, it is a state management hook. The reason behind using context API's for the state management is because it is light weight and as per now, there are not that much states to be managed, but when the project scales, we can use state managements libraries like Redux.
-
Dummy Data => It contains all the dummy data. For now, data is hard coded as no backend is integrated but once the backend will be integrated, we will no longer need this.
-
Assets => It contains all the required images which are used in various Pages and Components.