Introducing SEA Salon, a rising star in the salon industry known for their outstanding services and excellent reviews. With a rapidly growing clientele and a stellar reputation, SEA Salon is your premier destination for all your beauty needs. Because of this, SEA Salon has gained a lot of customers. To handle the new customers, the SEA Salon management team has decided to develop a new SEA Salon Application. The website is accessible at SEA Salon.
The purpose of making this project is to create a salon website for submission to the Compfest 2024 Academy and utilizing modern technologies like NextJS to improve my knowledge.
This salon app enables users to book, add, edit, and delete services, facilitating easy management for the admin across multiple branches. Additionally, admins can manage branch details, and add, edit, and delete stylists, as well as delete reviews and reservations. When making a booking, users can choose their preferred stylist and select one or more services at the desired branch. After selecting a stylist and time, the app will notify users if the reservation is possible or if there is a scheduling conflict with another client who has booked the same stylist at the same time. Users can also view their past reservations on the "My Reservations" page. This website also has a responsive design, making it easy for users to access it anywhere and anytime. It also applies authentication for user security and utilizes the Cloudinary API to handle image uploads.
- Admins need to reload the page after adding, editing, or deleting data to ensure that the displayed data is always up-to-date.
- NextJS App Router (Fullstack Framework)
- React (JS Library)
- TailwindCSS (CSS Framework)
- Typescript (Typesafe for JavaScript)
- NextAuth (Authentication)
- Cloudinary (Cloud storage for image)
- Aiven (Database Provider)
- Postgresql (Database)
- Prisma (Object Relational Mapper)
- bcrypt (Hashing Passwords)
- React Slick (Pagination)
To access the app, you can just simply go to:
To run it locally, you will need to add the following environment variables to your .env file:
DATABASE_URL=your-database-url
NEXTAUTH_SECRET=your-nextauth-secret
CLOUDINARY_CLOUD_NAME=your-cloudinary-cloud-name
CLOUDINARY_API_KEY=your-cloudinary-api-key
CLOUDINARY_API_SECRET=your-cloudinary-api-secret
NEXT_PUBLIC_CLOUDINARY_API_KEY=your-cloudinary-api-key
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=your-cloudinary-cloud-name.env for development of this project:
DATABASE_URL="postgres://avnadmin:AVNS_0DBr8NDQWJIIE_Y7dzm@pg-2ef7d7f5-sea-salon-db.c.aivencloud.com:21548/defaultdb?sslmode=require"
NEXTAUTH_SECRET="seasaloncompfest2024"
CLOUDINARY_CLOUD_NAME=dkrara5uf
CLOUDINARY_API_KEY=734323139493683
CLOUDINARY_API_SECRET=-WhtOSdBvz0rTJLu-aTvlLNJNaI
NEXT_PUBLIC_CLOUDINARY_API_KEY=734323139493683
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=dkrara5ufFollow these steps:
- Clone this repository :
git clone https://github.com/Filbert88/SEA-Salon.git- Navigate to the src directory of the program by running the following command in the terminal:
cd SEA-Salon- Install the required packages:
npm install- Set up your Prisma database:
npx prisma migrate dev- Start the development server:
npm run devThe application should now be running at http://localhost:3000.
- not-found page
- loading animation