eCommerce-Application

The eCommerce Application is an application for the RSSchool final task of 2023Q1 stage#2. Done in eager to match latest Front-end technologies alongside with pursue of learning Commerce Tools while following the goal of creating awesome design.

Tech Stack

Project's Purposes

Create during Four Sprints fully functional eCommerce Application with every Sprints' tasks done to the fullest and in time.

Project should have astonishing / just incredibly beautiful and mesmerizing real art design with good UI and UX... kinda eyes popping 👀, jaw dropping 👄, heart stopping 💖.

Gonna keep healthy atmoshpere and good mood of all teams' members and our server's allies while working in close collaboration with each other, also hosting daily meetups, doesn't matter what difficulties with the task we'll meet on the way.

Deeply in the core of the project should create consistent code base, following principles of SRP, DRY, KISS.

Also appear in the Top works with this our final project after voting at the end of the course.

Project's Structure

Folders Structure

public

assets (pics, icons, backgrounds, design references etc.)
favicon
fonts

src

App (One ring to rule them all, One ring to find them, One ring to bring them all ©Lord of the Rings)

components

Card
Catalog
Header
Footer
shared (reused code e.g. Buttons, Inputs etc.)

pages

Main
Products
Product
Auth
Registration

store
hooks
data (product's config, arrays of sounds etc.)
types (types, enums, interfaces)
constants (base url, error messages codes etc.)
utils (just helpful functions, not particularly dedicated to one of the layers)
style (global with imports)
index.html
main.tsx

NB:

naming

branches names are in kebab-case and have prefix of assigner name (i.e. red-awesome-branch, yana-wow-branch, cherry-kinda-branch etc.)
names of components creating visual part of application (so called silly) are in PascalCase as well as their files' and folders' names (e.g. Main, Card, Auth, App etc.)
all other folders and files, except components' ones, are in kebab-case (e.g. awesome-folder, cool-new-file etc.)
classic clever functions exposing behaviour are in camelCase and start with verb (e.g. makeMyDay)
const and let variables are in camelCase (e.g. niceNewThing)

.scss file for each .tsx file and one global .scss file with imports
.scss files have names mirroring corresponding .tsx files' names
using modern-normalize with scss modules alongside with scss nesting where it's necessary in components
workflow's based on functions and hooks
separated logic (business logic / data control) and the app's UI (how the app looks like / appearance)
architecture idea is based on FSD (Feature Sliced Design) and Component Apporach

Commands

npm run start

Runs the app in the development mode opening it in browser.
Open https://localhost:3001

npm run build-prod

Builds the app for production to the dist folder.

npm run test

Launches the application test runner one time.

npm run test-watch

Launches the test runner in the interactive watch mode.

npm run clear

Deletes the dist folder after deploy.

npm run lint

Launches ESLint checking the repository for errors.

npm run lint:fix

Launches ESLint fixing all found errors.

npm run stylelint

ESLint checks all the style files fixing alongside all the found errors.

npm run format

Launches Prettier and fixes all the found errors in the working directory.

npm run prepare

Checks all the files for errors before commit.

lyutails / eCommerce-Application