This is a Next.js project bootstrapped with create-next-app
.
- Install all dependencies
npm i
- Create a new project on Vercel: https://vercel.com/new.
- Create a PostgresQL database on Vercel and attach it to your project.
- Create a Vercel Blob Storage instance on Vercel and attach it to your project.
- Log into vercel on your local environment
vercel login <email>
- Pull your configuration from vercel:
vercel env pull .env
- Generate the prisma schema:
npm run prisma:generate
- Push your prisma schema to the database:
npm run prisma:push
- Run the development server:
npm run start
- (optional) Start the storybook server:
npm run storybook
- (optional) Start the prisma studio server:
npm run prisma:studio
- Log in as one of the three available users. The password for all three users is
1234
.- The buyer is
buyer@example.com
- The first seller is
seller1@example.com
- The second seller is
seller2@example.com
- The buyer is
- Use the seller accounts to create new listings and view pending orders.
- Seller's can mark orders as shipped from the pending orders page.
- Use the buyer account to add listings to your cart and complete checkout.
- As a user, I want to be able to create an account
- As a user, I want to be able to login to my account
- As a user, I want to be able to logout of my account
- As a seller, I want to be able to create a listing
- As a seller, I want to be able to edit a listing
- As a seller, I want to be able to delete a listing
- As a user, I want to be able to view a seller's profile
- As a user, I want to be able to view a listings details
- As a buyer, I want to be able to view a listing
- As a buyer, I want to be able to add a listing to my cart
- As a buyer, I want to be able to remove a listing from my cart
- As a buyer, I want to complete checkout
- As a buyer, I want to be able to view my orders
- As a seller, I want to be able to view pending orders
- As a seller, I want to be able to mark an order as shipped
--- Progress ---
Stretch Goals:
- As the system, provide a webhook to automatically mark an order as shipped
- As a user, I want to be able to search for listings
- As a user, I want to be able to filter listings
- As a user, I want to be able to review a product
- As a user, I want to be able to add a product to my wishlist
- As a user, I want to fill out a checkout form with my address and payment information
- Database: Prisma + PostgresQL
- Styling: Sass
- Authentication: NextAuth.js
- Deployment: Vercel
- Object Storage: Vercel Blob Storage
- Components: Material UI
- API: tRPC
- Frontend Workshop: Storybook.js
- Unit Tests
- End-to-end Tests
- Continuous Integration/Deployment
- Realtime updates
- Mobile responsive design
- SEO
- Analytics
- Error reporting
- Logging
- Monitoring
- Caching
- Keyboard Shortcuts
- Form Validation