we Buy
An ecommerce web application
Live preview
weBuy(Live)
we Bank(Live)
Description and goals
An ecommerce website that fascillitates transactions between two different organizations.
- A Bank organization(we Bank)
- An ecommerce website(we Buy)
The main objective of this project is to demonstrate transactions and communications between different api endpoints.This project gives users the ability to order and buy various kinds of items from an ecommerce shop. In order to complete the purchase they need to sign up to a different entity. A fictional bank called weBank.
Features
- Fully typesafe frontend and backend code written in Typescript.
- Complete runtime data validation implemented with zod both in client and server side.
- Fully implemented Authentication and Authorization.
- Fully responsive in all screen sizes and devices.
Basic workflow
Technologies used
- Typescript : Typesafe code implementation
- NextJs :Frontend and Backend integration
- MongoDb :Database
- Mongoose : Database ODM
- Tailwind CSS : Styling
- Radix UI : Icons,Accessible components
- Next Auth : Authentication and Authorization
- Firebase : File storage
Some screenshots
-
Homepage:
-
Add Product page
-
Shopping Page
-
Cart Page
Setup:
- First clone this github repo.
- Then clone the we-bank github repo. They depend on each other. Follow the instructions for we bank using the link above.
- Install all the dependencies using npm.
npm i
- Run the command
npm run dev. - This should start the application at http://localhost:3000
- Now add some environment variables.
- Add a .env.local file inside the ecommerce folder.
- Then add these envionment variables in the .env.local file:
- MONGODB_URI
- NEXTAUTH_SECRET
- Then you should create a firebase app for file storage.Get all the api information from your firebase app and add them in the .env.local file as well.