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.
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.
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
Runs the app in the development mode opening it in browser.
Open https://localhost:3001
Builds the app for production to the dist
folder.
Launches the application test runner one time.
Launches the test runner in the interactive watch mode.
Deletes the dist
folder after deploy.
Launches ESLint checking the repository for errors.
Launches ESLint fixing all found errors.
ESLint checks all the style files fixing alongside all the found errors.
Launches Prettier and fixes all the found errors in the working directory.
Checks all the files for errors before commit.