This project uses the Atomic Design pattern as described by Brad Frost in his book Atomic Design.
Building and maintaining large React applications can quickly become messy and tedious to maintain if a proper folder structure is not employed. The Atomic Design pattern helps to solve this problem by grouping components into atoms, molecules, organisms, templates and pages.
Since this project is small, only atoms folder was implemented.
- Typescript is used to enable static type checking
- Core project componets are prefixed with
Appto easily identify them. - CSS Modules is configured to enable scoping of css styles within a component
- Tailwind is configured to easily use utility css classes
- Redux is configured for global state management. While this might be an overkill for this small project, I used it to model how it can be used in a real-life application.
$ git clone git@github.com:adesege/product-details-demo.git // to clone the project
$ cd product-details-demo // change working directory
$ npm install -g pnpm // Install pnpm globally if you don't have it installed already
$ pnpm install // Run this command to install dependencies
$ pnpm start:dev // To start the app in development environment.
// If you are deploying for production
$ pnpm build // To build the app. Copy the contents of the "build" directory to a static server. vercel.com is recommended.Once the app is running, you can access the app on http://localhost:3900 in development environment.
See https://pnpm.js.org/en/motivation for why pnpm is used for this project.