FashionVista

FashionVista is an e-commerce platform that allows anyone to create an account, and then create their own fashion store. Users can choose their own custom subdomain for their store and share their store URL with others.

Live Site | Example Store

Contributors:

• Brandon Bhangari | Github | Portfolio | LinkedIn
• Albert Ngodi | Github
• Carlos Pereira | Github
• Rachel Stroy | Github
• Diana Jordan | Github

Demo Credentials:

• Username is test@test.com
• Password is testers

This is a Next.js project bootstrapped with create-next-app.

Key Features:

• Create an account and sign in or use the demo credentials
• Create your own store page by entering a store title and a custom subdomain into the provided form
• Add products to your store from the dashboard page
• Add a custom store banner image and text from the dashboard page
• Archive/unarchive your products from the dashboard page
• Visit your store page
• Share your unique store page URL with others
• Use the search bar functionality to search for a product
• Open product detail modals for more info about a product
• Add products to your cart
• Checkout and finalize a purchase using Stripe
• View the order history for your store on the dashboard page

Setting up the Project

Cloning the repository

git clone git@github.com:chingu-voyages/v45-tier3-team-43.git

Install packages

npm i

Setup .env file

• The environment variable for the database URL can be found in your personal MongoDB account
• The environment variable for NextAuth is a random string of your choice
• The environment variable for Cloudinary can be found in your personal Cloudinary account
• The 2 environment variables for Stripe can be found in your personal Stripe account, follow Stripe instructions to get them

DATABASE_URL=
NEXTAUTH_SECRET=
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=
STRIPE_API_KEY=
STRIPE_WEBHOOK_SECRET=

Connect to MongoDB and Push Prisma

npx prisma generate
npx prisma db push

Start the app

npm run dev

Available commands

Running commands with npm npm run [command]

command	description
dev	Starts a development instance of the app

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

Technologies/Tools Used

• Next.js
• React.js
• TypeScript
• Git/Github
• CSS Modules
• Cloudinary
• MongoDB
• NextAuth
• Stripe
• Prisma
• Vercel

Dependencies

• @next-auth/prisma-adapter
• @prisma/client
• @types/node
• @types/react
• @types/react-dom
• axios
• bcrypt
• eslint
• eslint-config-next
• next
• next-auth
• next-cloudinary
• react
• react-dom
• react-hook-form
• react-hot-toast
• react-icons
• stripe
• typescript

Dev Dependencies

• @types/bcrypt
• prisma

Screenshots

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Team Documents

You may find these helpful as you work together to organize your project.

• Team Project Ideas
• Team Decision Log

Meeting Agenda templates (located in the /docs directory in this repo):

• Meeting - Voyage Kickoff --> ./docs/meeting-voyage_kickoff.docx
• Meeting - App Vision & Feature Planning --> ./docs/meeting-vision_and_feature_planning.docx
• Meeting - Sprint Retrospective, Review, and Planning --> ./docs/meeting-sprint_retrospective_review_and_planning.docx
• Meeting - Sprint Open Topic Session --> ./docs/meeting-sprint_open_topic_session.docx