Kopero Studios Frontend

• Iganza-roy

Booking platform for photographers and videographers. Buitle with the Reactjs framework, tailwind CSS, and packages like axios, context-api and the react-router-dom.

#axios #context-api #django #reactjs #router-dom #tailwindcss

Demo Download

KOPERO STUDIOS

We capture every moment in your life wherever, whenever and however you need it in just few steps.

This is a full-stack booking platform built using React (frontend) and Django (backend), enabling users to easily book services with experienced photographers and videographers. The platform offers a wide range of services and allows clients to connect directly with professionals in a streamlined and user-friendly manner.

Explore the docs »

View Demo · Landing Page · Request Feature

Features of The Project

• User and Crew Profiles: Users and crew members have distinct profiles, each with tailored navigation and features.
• Service Selection and Booking: Clients can view available services and book appointments with professionals, filtering by date and availability.
• Role-Based Navigation: Custom dashboards and navigation bars for crew and users.
• Authentication: Users and crew members can log in and register with unique role-based access, using token-based authentication.
• Appointment Management: Both clients and crew members can manage appointments with status tracking, such as booked or completed.
• Profile and Image Upload: Users can update profile pictures directly in the PUT request.

Project Structure

The project is organized into two main directories:

• Frontend: Built with React, using Vite as the bundler.
• Backend: Developed with Django, handling API endpoints, authentication, and data management for bookings and profiles.

Getting Started

Installation

Ensure you have Node.js and npm installed for frontend setup, and Python for backend setup. Clone both repositories for a complete setup.

1. Clone the Repositories

Clone this repository and the backend server repository.

git clone <https://github.com/omollpeter/KoPeRo-Studios-Frontend/edit/main/README.md>
git clone <https://github.com/omollpeter/kopero-studios-server>

2. Frontend Setup

1. Navigate to the frontend directory.

   cd KoPeRo-Studios-Frontend
   

   2, Install Dependancies

   npm install
   

2. Run the development server.

   npm run dev
   

3. Backend Setup

For backend setup and API details, please refer to the backend server repository link provided here: kopero backend Repo. Follow the instructions in the backend repository README for database migrations, environment configurations, and server startup.

Running the Project

1. Ensure both frontend and backend servers are running. The frontend will likely run on localhost:5173 (default for Vite), while the Django backend server should run on localhost:8000.
2. To connect the frontend to the backend, ensure that CORS settings in Django are configured to allow requests from http://localhost:5173.
3. Update any environment variables as needed for your setup.

API and Backend Integration

The Django backend provides RESTful endpoints for user registration, authentication, profile management, service listings, and booking management. Endpoints:

• User and Crew Authentication: /api/v1/auth/
• Profile Management: /api/v1/profile/
• Service Listings: /api/v1/services/
• Bookings: /api/v1/bookings/ For further API details and request examples, refer to the backend documentation in kopero backend Repo.

Usage

1. Register/Login as a user or crew member.
2. Browse Services: Users can view the list of services offered by photographers and videographers.
3. Book an Appointment: Select an available crew member, choose a service, and complete the booking process.
4. Manage Appointments: Track status, reschedule, or cancel appointments through the user or crew dashboard.

Dependencies

The project relies on several key packages:

• React: Frontend framework for building user interfaces.
• Vite: Bundler for fast project setup and optimized builds.
• Django: Backend framework for handling API requests, user management, and data persistence.
• Axios: For making HTTP requests to the backend API.
• JWT-Decode: For token-based authentication.
• Toast Notifications: Used for alerting users with messages and errors.
• Other packages and dependencies are listed in the package.json files in their respective repositories.

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Top contributors:

License

Distributed under the MIT License. See LICENSE.txt for more information.

Contact

• Roy Kibata - @Iganzaroy - iganzaroy55@gmail.com

Project Link: https://github.com/omollpeter/KoPeRo-studios

(back to top)