Nice Gadgets Store

General info

This project, built using React and other related technologies, is the best example of teamwork you have ever seen. This is the frontend part of a full-stack project hosted on the Heroku service. All the data displayed here is obtained directly from the server, which we implemented in the backend part.

Demo Link

Design

Technologies

The following technologies were used to build this project:

• React: A JavaScript library for building user interfaces.
• Module CSS: A method of writing CSS that scopes styles to specific components or modules.
• SCSS: A CSS preprocessor that adds features like variables, mixins, and nesting to CSS.
• BEM: A naming convention for CSS classes that makes code more modular and easier to read.
• TypeScript: A statically typed superset of JavaScript that adds optional type annotations.
• JavaScript: The programming language used to build the frontend logic.
• React-Slick: A library for building responsive, customizable carousels and sliders in React.
• Node.js: A JavaScript runtime built on Chrome's V8 JavaScript engine used for building the development environment.

Getting Started

To get started with this project, you will need to have Node.js installed on your machine.

1. Clone the project to your local machine.

git clone https://github.com/<your-username>/<your-repo-name>.git

2. Install the project dependencies by running the following command in the project directory:

npm install

3. Start the development server by running the following command:

npm start

4. Open the app in your web browser by navigating to http://localhost:3000.

Project Structure

The project is structured as follows:

├── public/
│   ├── index.html
│   ├── favicon.ico
│   └── ...
├── src/
│   ├── components/
│   │   ├── Component1/
│   │   │   ├── Component1.tsx
│   │   │   ├── Component1.module.css
│   │   │   └── ...
│   │   ├── Component2/
│   │   │   ├── Component2.tsx
│   │   │   ├── Component2.module.css
│   │   │   └── ...
│   │   └── ...
│   ├── pages/
│   │   ├── Page1/
│   │   │   ├── Page1.tsx
│   │   │   ├── Page1.module.css
│   │   │   └── ...
│   │   ├── Page2/
│   │   │   ├── Page2.tsx
│   │   │   ├── Page2.module.css
│   │   │   └── ...
│   │   └── ...
│   ├── base_styles/
│   │   ├── index.scss
│   │   └── ...
│   ├── App.tsx
│   ├── index.tsx
│   └── ...
├── .eslintrc.js
├── package.json
├── tsconfig.json
└── ...

• The public/ directory contains the public assets of the project, such as the index.html file and the favicon.ico file.

• The src/ directory contains the source code of the project.

• The components/ directory contains reusable React components, each with its own .tsx file.

Conclusion

This project demonstrates how to build a modern frontend application using React and related technologies. By using modular CSS techniques like module CSS and BEM, we can write CSS that is more maintainable and easier to read. TypeScript adds type safety to our code, which makes it easier to catch bugs during development. React-Slick allows us to build responsive, customizable carousels and sliders that work well on both desktop and mobile devices.

If you have any questions or feedback about this project, please feel free to reach out to the contributors. We hope this project inspires you to build your own frontend projects using the latest web technologies!