AURAL

An e-commerce Record Store: TypeScript, React, Redux & Firebase (Auth/Firestore)

Live Demo

https://aural.joecoxdev.com

Expected Outcome:

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.

Expected Learning Outcomes:

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.

Commiting

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.

Tech used

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

Available Scripts

In the project directory, you can run:

npm start

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.

npm test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

npm run build

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.

npm run eject

Note: this is a one-way operation. Once you eject, you can’t go back!

---

Project Approach

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

What products will be available on the website?

The website will provide products related to music - vinyl records, CDs, tote bags and band/artist t-shirts.

Components

I will use functional components with hooks for this project.

File structure

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

DB Structure

What collections do I need?

• customers
• products
• orders

Note: To begin with (v1) I will not be using stock control

Learn More

You can learn more in the Create React App documentation.

To learn React, check out the React documentation.