Your Next Generation Clothing Marketplace
Reventé is an online platform that takes inspiration from popular marketplaces like Carousell. We are on a mission to redefine the way people buy and sell used clothing, offering a unique selling proposition that centers around high-quality pre-loved garments. Every item listed on our platform goes through a thorough refurbishment and quality check process conducted by our expert team, ensuring that only exceptional and excellent-condition clothing finds its way to our marketplace.
| Frontend Website (Vue/Vite) | Backend Server (NodeJS) |
|---|---|
| Reventé | Stripe & APIs |
| GitHub Repo (Private) | GitHub Repo (Private) |
Please ask Terristwj to allow collaboration.
Before you get started, make sure you have everything setup for both frontend and backend.
The repository link is currently private. Please ask Terristwj to allow collaboration. Ensure you have the following tools and dependencies installed:
- Node.js
- npm (Node Package Manager)
- Firebase
- Authentication
- Firestore
- Storage
- Secret Keys (APIs) (.env)
- Firebase
- Google Maps
- OpenAI
- PaLM
- Backend URL (Deployed and Local)
The repository link is currently private. Please ask Terristwj to allow collaboration. Ensure you have the following tools and dependencies installed:
- Node.js
- npm (Node Package Manager)
- Secret Keys (APIs) (.env)
- Stripe
- OpenAI
- PaLM
-
Clone the backend repository
- Follow the installation steps
- Run the backend
-
Clone this frontend repository and install the necessary dependencies:
npm install
-
In both frontend and backend, ensure you have the
.envfiles added into each of the project's root directory.- Frontend -
.env - Backend -
.env
- Frontend -
-
To run the project locally, use the following command:
npm run dev
-
To deploy the project on the cloud, follow these steps:
- Make sure you have Firebase CLI (Command Line Interface) installed globally:
npm install -g firebase-tools
- Log in to Firebase:
firebase login
- Build the project:
npm run build
- Deploy to Firebase:
firebase deploy
A compilation of developer portals to check API limits, payments, deployments, database, and etc. Specific shortcuts require access as collaborator.
- Firebase
- Others
- Backend
- Backend Vercel
- OpenAI Billing
- PaLM API Keys
- Replicate Billing
- Replicate Models Used
- Google Drive Files
After installation and running both frontend and backend projects, you will start in the Homepage. Our website is also deployed. The following are the various user journeys:
Wanting to learn more about Reventé, users will want to learn more about 'Who we are' by visiting the About, Terms & Conditions, and FAQ.
At Reventé, we sell various recycled clothings. Our buyers do not need to login to make a purchase. Instead, our buyers can directly visit our Product Listings, browsing through our extensive product catalogue and filtering any specific tags.
Once buyers have found an item, they can proceed to 'Add to Cart'. From here, they may proceed to checkout and complete the purchasing procedure through making payment with Stripe.
Whilst shopping logged in, buyers will be able to view, modify, and gain access to various user-related features. They will be able to view/modify their profile, check their wishlist and purchase history. And make reviews on their purchases.
At Reventé, we buy clothings from our users. Sellers will have to first login, and proceed on to upload their clothing product for listing. Upon completion, their items will not be immediately listed but instead, they will have to visit our physical warehouse where we will further negotiate the price and buy their item on the day of visit.
After making their first business transaction with Reventé, sellers can continue viewing their profile to see what has happened to their sold item. Most importantly, when we have finally sold their item, sellers can view the reviews from other buyers about their items.
To access the admin page, staff will have to access a secret link. This page will serve the warehouse team and marketing team. The warehouse team will Approve/Reject items from sellers on the day of their visit. The marketing team will make use of the admin dashboard, to effectively create meaningful monthly reports.
-
UI/UX
- Bootstrap: For responsive and stylish user interface design.
- PrimeVue (BTL): A UI component library for Vue.js.
- Animations (BTL):
- Anime.js: A flexible JavaScript animation library.
- vue-responsive-video-background-player: For responsive video backgrounds.
- canvas-confetti: Confetti effect on successful actions.
- Fonts/Icons (BTL):
- Font Awesome: A popular icon library.
- Prime Icons: Icon library for PrimeVue.
-
Frontend Codes
-
Axios: A promise-based HTTP client for making API requests.
-
Vue Router (BTL): For client-side routing and navigation guards.
-
Pinia (Like Vuex) (BTL): A state management solution.
-
-
JavaScript Game (BTL):
- GSAP: For game UI animation.
- Howler: For audio in your JavaScript game.
-
Others:
- Chart.js (BTL): Creating insightful statistics for admin
- Google Maps:
- Geolocation
- Google Address Autocomplete
- DialogFlow (BTL): FAQ Chatbot
- @chat-ui/vue3: Messaging UI component
-
Firebase:
- Authentication (BTL): Secure user authentication.
- Firestore Database: A NoSQL database for storing data.
- Firebase Hosting (BTL): For deploying your web application.
-
Backend Services (BTL):
- Stripe: Payment service provider
- OpenAI: Used to assist generating text
- PaLM: Used as an alternative to OpenAI as backup
- Replicate: A collection of pre-trained AI models
- Models used:
- Used to generate product information from an image
- Stripe: Payment service provider
- OpenAI: Used to assist generating text
- PaLM: Used as an alternative to OpenAI as backup
- Replicate: Used to generate product information from an image
- Vercel: Cloud Deployment
- Frontend
- PrimeVue & Prime Icons
- Anime.js
- Canvas Confetti
- Font Awesome
- GSAP & Howler
- Chart.js
- DialogFlow
- Vue Router
- Pinia
- Database
- Firebase Authentication
- Firebase Storage
- Backend
- Stripe
- OpenAI
- PaLM
- Replicate
- Deployment
- Firebase Hosting
- Vercel
Homepage.
Sustainability game where users learn more about why sustainability in fashion matters.
FAQ page powered by AI.
Listings and filters.
Wishlist.
Uploading Items.
Autofill Accuracy.
Admin dashboard and AI assistant.
Special thanks to the following resources that helped us along the way:
-
Firebase
-
UI/UX
-
Vue Learnings
-
Others
-
Express JS
-
Backend APIs
-
I forgot to keep track of all the links - Terris
Feel free to add more screenshots and shoutouts to your GitHub profiles, repositories, or any contributors who played a significant role in the project. Good luck with your portfolio piece!
| Terris | Owen | Adrian | Victoria | Glen |
|---|---|---|---|---|
| Terristwj | owengohh | adriank0h | viqeey | 0gw0 |