- Introduction
- About
- Features (implemented)
- Features (To be implemented
- Technologies
- Folder structure
- Contributing
- About Tech Stack (For contributors)
- Link to resources
4EvaBraids is an online hair braiding platform, where users can books appointments with with skilled braiders and get their hair made, either as home service or onsite braiding. While this is the core of it's purpose there are other functionalities and features developed to spice up the site - Read on and see more!
- Purpose
- The purpose of this site is to make finding and making braiding appointments easier for clients and also to automate managing custormers for the braiders. It also improves visibility and professionalism.
- Motivation
- Prior tonow, braiders use Instagram and Tiktok as their bassic platform for professional page and work gallery. while these platforms are very good when used as galleries, they have several disadvantages. Just to list a few
- Not flexible
- Zero Automation
- Less professional
- Poor data gathering capabilities
- Prior tonow, braiders use Instagram and Tiktok as their bassic platform for professional page and work gallery. while these platforms are very good when used as galleries, they have several disadvantages. Just to list a few
- Solution
- We provide the solution to all the above stated problems, and even more. such solutions are stated below
- Great professional brand (using a .com site, cool!)
- Unlimited way to showcase your work (we even liked the gallery to both IG and Tiktok, so videos hosted there can be displayed nd showcased on the site while keepig our database lighter
- Premuim booking experience
- Blog to improve SEO and show Ads
- Massive data logging and gathering information
- Complex automation to ease both client and braider of stress
- We provide the solution to all the above stated problems, and even more. such solutions are stated below
{{ To be populated later }}
Note
The following features are place holders from the backend
- Gallery: A video and photo library
- Gallery from our local database
- Gallery from Instagram
- Gallery from Tiktok
- Booking algorithm
- Account is created automatically using booking information
- Email is sent to the braiders for a booking appointment
- SMS is sent to the braiders for a bookig appointment
- The whatsapp contack and IG handle of braider is returned to client
- Blog
- Blog with title, body and images (with links to youtube videos if needed)
- Comments and likes for a blog
- Testimonials
- Testimonials from Clients
- Achievemens and certificates
- Online Payment Platform
- For approved appointments
- For items bought from the e-store
- E-Cormmerce
- An e-store for hair accessories
- And other fashion components
The following technologies were used for this project
| Technology | Purpose | Documentation link |
|---|---|---|
| NextJS | Easy creation of scalable, fast, SEO friendly react applications | https://nextjs.org/docs |
| Tailwind CSS | Provide a utility first CSS framework, simplifying web applications styling | https://v2.tailwindcss.com/docs |
| Shadcn UI | Streamline development by offering pre-built, themeable components that integrate seamlessly with Tailwind CSS for rapid and consistent UI design. | https://ui.shadcn.com/docs |
| Playwright | Modern end-to-end testing framework designed for reliable automation of web applications across multiple browsers (Chromium, Firefox, and WebKit) | https://playwright.dev/docs/intro |
| Vi test | Fast, modern testing framework for JavaScript and TypeScript, designed to work seamlessly with Vite. It focuses on speed, simplicity, and deep integration with Vite's ecosystem, making testing efficient and developer-friendly. | https://vitest.dev/guide/ |
Tip
The directory structure was created buy running the command tree >> dirStructure.txt from the root of this project
You can run it to update the file dirStructure.md then copy and past on this README file
.
├── app
│ ├── atoms
│ │ ├── Button.tsx
│ │ └── icons.tsx
│ ├── favicon.ico
│ ├── fonts
│ │ ├── GeistMonoVF.woff
│ │ └── GeistVF.woff
│ ├── globals.css
│ ├── layout.tsx
│ ├── Molecules
│ │ ├── AdressDescription.tsx
│ │ ├── DescriptionCard.tsx
│ │ ├── ImageCard.tsx
│ │ ├── OfferCard.tsx
│ │ └── TipsCard.tsx
│ └── page.tsx
├── components
│ └── ui
│ ├── accordion.tsx
│ ├── aspect-ratio.tsx
│ ├── button.tsx
│ ├── card.tsx
│ ├── select.tsx
│ └── sonner.tsx
├── components.json
├── dirStructure.md
├── docs
│ └── images
│ └── README.md
├── lib
│ └── utils.ts
├── next.config.ts
├── package.json
├── package-lock.json
├── postcss.config.mjs
├── public
│ ├── file.svg
│ ├── globe.svg
│ ├── hero-image.svg
│ ├── logo.svg
│ ├── Model-1.svg
│ ├── next.svg
│ ├── vercel.svg
│ └── window.svg
├── README.md
├── tailwind.config.ts
└── tsconfig.json
Hi, we appreciate any contribution to this repository, kindly fork this repo, add your feature (or fixes) and create a pull request. You can start by implementing the yet-to-be-implemented above or check for any issue and solve it.
- Google drive
- Project pitch
- Backend Repository
This is a Next.js project bootstrapped with create-next-app.
To set up and run this project locally, follow these steps:
Make sure you have the following installed:
- Node.js (LTS recommended) - Download here
- npm or yarn (comes with Node.js, or install yarn via npm install --global yarn)
-
Clone the Repository:
git clone https://github.com/Enielect/4Eva-Braids.git
cd into 4Eva-Braids ...
-
Install Dependencies:
npm install # or yarn install
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Geist, a new font family for Vercel.
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!
The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.
Check out our Next.js deployment documentation for more details.