React-Store

This is a project bootstrapped with @vitejs/app (react-ts), added with Material UI and TypeScript setup. You can see: Live Demo

Table of Contents

• React-Store
  • Features
  • Built With
    • Dependencies
    • Dev Dependencies
  • Installation & Usage
    • Prerequisites
    • Install
    • Commands
  • Project Folder Structure
  • License

Features

This project setup will include following features.

• 🔥 Landing layout
• 🌇 Carousel Image Slider
• ⭐️ Reponsive Design
• 🪳 Mocks Pagination
• ⚡ Blazing fast dev server and build
• 🔗 Route management added (react-router-dom configured)
• 🧙‍♂️ Developer experience improved with ESLint, Prettier and Husky
• 📈 Absolute Import and Path Alias — Import components using @/ and ~/ prefix
• 🤖 Conventional Commit Lint — Make sure you & your teammates follow conventional commit
• ▲ Netlify and Vercel deployment configurations

Built With

Dependencies

Package	Description
React	The library for web and native user interfaces
Redux Toolkit	The official, opinionated, batteries-included toolset for efficient Redux development
Material UI	Ready-to-use foundational React components, free forever. It includes Material UI, which implements Google's Material Design.
Redux	Predictable state container for JavaScript apps
react-router	Declarative routing for React

Dev Dependencies

Package	Description
Vite	Next generation frontend tooling. It's fast!
Typescript	TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.
Husky	Git hook management
Conventional Commit	A specification for adding human and machine readable meaning to commit messages.
Commitlint	Lint commit messages
Commitizen	Using a standardized set of rules to write commits, makes commits easier to read, and enforces writing descriptive commits.
Lint Staged	Run linters against staged git files and don't let 💩 slip into your code base!
ESLint	A tool for identifying and reporting on patterns found in ECMAScript/JavaScript code.
Prettier	An opinionated code formatter
vite-plugin-pwa	Zero-config PWA Framework-agnostic Plugin for Vite

Installation & Usage

Prerequisites

• node >=18.4.0
• npm >=9.x.x

Install

Create the project.

git clone https://github.com/enesdir/react-store.git

Access the project directory.

cd react-store

Install dependencies.

npm install

Serve with hot reload at http://localhost:3000.

npm run dev # start development server

Commands

Command	Description
npm run dev	Starts the server in dev mode
npm run lint	Runs ESLint on the project
npm run lint:fix	Runs Prettier on entire src folder
npm run prettier:verify	Runs Prettier-check and throws error if fails
npm run lint-staged	Runs Prettier on only staged (changed) files
npm run type-check	Runs TSC
npm run build	Runs build production bundle to 'dist' directly
npm run preview	Runs start production server

Project Folder Structure

The following is the structured layout of the project directory, providing an overview of the organization of files and folders.

- root
  - public/                     # Contains static assets and files served to the client
    - assets/                   # Holds publicly accessible assets such as images, fonts, etc.
  - src/                        # Contains the source code for the application
    - app/                      # Global application files including constants, CSS, and configurations
      - config/                 # Houses configuration files and settings for the application
    - components/               # Reusable UI components used across the application
      - {ComponentName}/        # Houses reusable React components shared between features
    - features/                 # Contains functional modules or sections of the application
      - {featureName}/          # Houses a specific feature module with its components, actions, and views
        - types/                # Houses TypeScript type definitions and interfaces specific to this feature
    - hooks/                    # Custom React hooks used across the application
    - pages/                    # Contains the application pages
    - router/                   # Houses the application's router configuration
    - themes/                   # Contains MUI design system files
    - utils/                    # Utility functions and helper modules

License

This project uses MIT license: License