MTSA Marketplace [Live Website]

This is a Next.js, Tailwind CSS website aimed at enhancing the user experience for MTSA's second-hand marketplace on Facebook. Since every seller have to post a PowerPoint for selling the items. Here are some of the issues I focused on improving:

1. The need to open a PowerPoint presentation to view items.
2. Lack of categorization for items.
3. Items that have been sold but are still listed due to outdated information.

Table of Contents

• Motivation
• Features
• Installation and Setup
• Demo
• License
• Contact Information
• Acknowledgments

Motivation

MTSA Marketplace is a platform for buying and selling items within the MTSA (Michigan Taiwanese Student Association) community. This project aims to simplify the process of trading second-hand goods by providing a user-friendly interface equipped with search and reserve functionalities.

Features

• 🛏️ Item Listing, add items, edit, and delete items
• 🔍 Dynamic Search and filter items by category
• ⚠️ Real-time Notifications
• 🔖 Saved Page for favorite items
• 📦 Order Page for monitoring reservations
• 🧑🏼 Update personal info and manage item listings and reservations

Core

• Nextjs with TypeScript for server-rendered React applications
• Prisma for database access, migrations, and ORM
• Axios for making HTTP requests
• MongoDB to store user, item, and reservation data
• Cloudinary CDN to store images

Authentication

• NextAuth.js for client-side social login (Google and Github)
• bcrypt for hashing passowrd before storing

Performance & Utilities

• next/font for font optimization
• next/navigation for in-memory client-side cache and patrial rendering
• next/image for automatic image optimization
• zustand for login/logout state management

UI/UX

• mui UI for date-time components
• React Hot Toast for toasts and notifications

Analytics

• vercel/analytics for application analytics

Installation and Setup

1. Clone the repository

   git clone https://github.com/yi-cheng-liu/mtsa-marketplace.git

2. Navigate to the project directory

   cd mtsa-marketplace

3. Install dependencies

   npm install

4. Setup .env

   DATABASE_URL=
   NEXTAUTH_SECRET="NEXTAUTH_SECRET"
   GITHUB_ID=
   GITHUB_SECRET=
   GOOGLE_ID=
   GOOGLE_SECRET=
   NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=

5. Setup Prisma

   npx prisma db push

6. Run the development server

   npm run dev

   Open http://localhost:3000 with your browser to see the webstite.

Demo

Home Page

Add an Item

Select Category	Enter Details	Upload picture

Item Page

Item Page	Confirm reservation

Order Page & Saved Page

Order Page	Saved Page

Profile Page

Profile Page	Reserved Items

License

MIT © Yi-Cheng Liu

Contact Information

For more information or contributions, you can reach us at: Yi-Cheng Liu, Email: [email protected] or [email protected]

Acknowledgments

This project has been an incredible learning journey in React and great code organization. Huge thanks to Antonio who is the creator of the Airbnb clone on Youtube. The insights and skills I gained from his course served as the foundation for this project. Also, thanks to the MTSA community for providing me the opportunity to build this project.