A fully functional ecommerce application with user authentication, database (products, customers, orders), basket + checkout with Stripe payments (add to basket + buy now), private routes for customer account and orders list.
Using this project, I intend to learn how to use Redux and Testing libraries. I will also use the project to increase my knowledge with Firebase services.
edit, 03/01/2022: I have decided to implement TypeScript, another skill set that I have been needing to learn for some time.
I also hope to pick up more useful information on database structure. With my previous project Block. Social Media I came to a some issues with structure - this time I would like to try out a new structure to gain a more rounded experience.
During the build of this project I intend to develop a habit of outlining a project, its core tools, components and design before I even begin to code. I feel like this will provide a more enjoyable experience.
Another aim is to focus on smaller commits, and providing shorter, but descriptive commit messages along with prefixes such as build
, ci
, docs
, feat
, fix
, perf
, refactor
, style
and test
.
TypeScript - JavaScript Superset for strongly typed code
React - JavaScript Library | Create React App (redux template)
Redux - State management
Redux-Toolkit - Simplifying Redux with utilities
Redux Persist - Persist and rehydrate a redux store
React Router Dom v6 - Routing
React Hook Form - Form validation
Firebase v9 - Database, authentication and file storage
TailwindCSS v3 - Styling
Craco - Create React App Config Override
HeroIcons - Icons
React Hot Toast - Toast notifications
Emailjs - contact form, order notifications
React Slick - Product feed carousels
Stripe - Checkout and payment
React Helmet Async - Page titles and metadata
Jest - Test runner
React Testing Library - Component tests
Webpack - Bundler
Babel - JavaScript Compiler
PostCSS - CSS Compiler
Autoprefixer - Vendor prefixes
Figma - Website Mock up
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build
folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
Note: this is a one-way operation. Once you eject
, you can’t go back!
I will use Figma to design a mock up of the over all website and components. I will take design inspiration from this website
Once the mock up is complete I will look at identifying routes required, followed by core components and then any other components I require i.e. page components for each route.
The project will then be initialised using npx create-react-app aural --template redux
The website will provide products related to music - vinyl records, CDs, tote bags and band/artist t-shirts.
I will use functional components with hooks for this project.
app.jsx
index.jsx
assets/
styles/
images/
constants/
index.js
types.js
routes.js
core/
CoreComponent/
index.jsx
index.test.jsx
components/
Component/
index.jsx
index.test.jsx
pages/
public/
Page/
index.jsx
index.test.jsx
private/
Page/
index.jsx
index.test.jsx
redux/
store.js
hooks/
useHook.js
helpers/
utils.js
services/
firebase.js
- customers
- products
- orders
Note: To begin with (v1) I will not be using stock control
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.