A super slick e-commerce to buy your audio hardware!
Audiophile is a online toy project that contains some of the core functionalities that an e-commerce system has:
- Product detail views
- Product lists for each category
- Featured products to highlight on the homepage
- Purchase cart system
- Checkout flow with OTP authentication, address geocoding and credit/debit card payments
- Payment confirmation or failure comms via email
This is a Front-end application. The core backend functionality lives here
- React
- Remix
- Tailwind
- Context API
- Typescript
- Vite
- Stripe for Payments
- Mapbox.js for maps graphic tools
- Fly.io for app deployment
To get a local copy up and running follow these simple example steps.
- Node v18+
- NPM
- Clone the project repository
git@github.com:mapra99/audiophile.gitcdinto the project folder and install node dependencies
cd audiophile
npm install --save-dev- Set up the Backend API following the instructions here
- Create a .env file based on the existing .env.example file_
cp .env.example .env- Follow the instructions on the .env file regarding the vendors variables that need to be configured
- Start the remix server
npm run devGo to http://localhost:3000 and navigate through the site.
If you are going to pay, use 4242 4242 4242 4242 as credit card number to simulate a successful payment.
This app demo site is hosted on Fly.io. Run the following to trigger a deploy
# This will create a new app called audiophile-stg if it does not exist on your account
flyctl launch --config fly.toml
# This will create a new deploy on the existing audiophile-stg app on your account
flyctl deploy --config fly.tomlMiguel Prada
Contributions, issues, and feature requests are welcome!
Feel free to check the issues page.
Give a star if you like this project!
- frontendmentor.io for their amazing designs and its community!
This project is MIT licensed.