Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/prasanth2817/mybarber-app-frontend
MyBarber is a modern, responsive web app for easy barber appointment bookings and profile management. Built with React and Tailwind CSS, it provides a seamless user experience for clients and barbers alike.
https://github.com/prasanth2817/mybarber-app-frontend
axios context-api javascript react react-router-dom tailwindcss
Last synced: 6 days ago
JSON representation
MyBarber is a modern, responsive web app for easy barber appointment bookings and profile management. Built with React and Tailwind CSS, it provides a seamless user experience for clients and barbers alike.
- Host: GitHub
- URL: https://github.com/prasanth2817/mybarber-app-frontend
- Owner: prasanth2817
- Created: 2024-07-10T13:05:07.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-11-06T13:23:59.000Z (9 days ago)
- Last Synced: 2024-11-06T14:27:49.869Z (9 days ago)
- Topics: axios, context-api, javascript, react, react-router-dom, tailwindcss
- Language: JavaScript
- Homepage: https://bookmybaber.netlify.app/
- Size: 152 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# MyBarber - Frontend
Welcome to **BookMyBarber**, a modern, responsive frontend for a barber appointment and management application. Built with React, Tailwind CSS, and Axios, this app allows users to book appointments, view barbers' availability, and explore services easily.
---
## 🚀 Project Overview
This repository contains the frontend code for **BookMyBarber**. It connects with the backend API to display data on barber profiles, available services, booking options, and more. The primary aim of this project is to deliver a smooth user experience with a clean, responsive UI.
---
## 📦 Tech Stack
- **React** - for building dynamic UIs.
- **Vite** - as the development build tool.
- **Tailwind CSS** - for responsive and modern styling.
- **Axios** - to handle HTTP requests to the backend.
- **React Router** - for navigation.
- **JWT Authentication** - for secure user sessions.
---
## 🛠️ Setup and Installation
1. **Clone the repository:**
git clone https://github.com/prasanth2817/MyBarber-App-Frontend.git
cd mybarber-frontend
2.**Install dependencies:**
npm install
3.**Set up environment variables: Create a .env file in the root directory and add the following variables:**
VITE_API_URL = https://mybarber-app-backend.onrender.com
4.**Run the development server:**
npm run dev
5.**Build for production**:
npm run build
⚙️ Project Structure
mybarber-frontend/
├── src/
│ ├── components/ # Reusable UI components
│ ├── pages/ # Page components for different routes
│ ├── hooks/ # Custom hooks
│ ├── contexts/ # Context providers for global state
│ ├── services/ # Axios services for API requests
│ ├── assets/ # Static assets
│ └── App.jsx # Main application component
│
├── public/ # Public files
└── README.md # Project documentation
🚦 Routes
/login - User login page
/register - New user registration page
/appointments - View and book appointments
/profile - User profile management
🚀 Key Features
Secure Authentication - JWT-based authentication for session management.
Responsive UI - Mobile-first design with Tailwind CSS.
Appointment Booking - Easy booking with real-time availability checks.
User-Friendly Interface - Designed for simplicity and ease of use.
🤝 Contributing
We welcome contributions! If you have suggestions or improvements, feel free to open a pull request.
1.Fork the repository
2.Create a new feature branch (git checkout -b feature/new-feature)
3.Commit your changes (git commit -m "Add new feature")
4.Push to the branch (git push origin feature/new-feature)
5.Open a pull
🐛 Issues
If you encounter any issues, please open an issue in this repository with relevant details.
📜 License
This project is licensed under the MIT License.
📞 Contact
For questions or support, please reach out to [[email protected]].
Thank you for using MyBarber!
