Cluab / Coders-Hub-Front-End

Coders-Hub application allows users to reverse different online classes depending on their preferences. They are assigned a mentor for each course and also get to choose how long they want to participate in the course.

📗 Table of Contents

• 📖 About the Project
  • 🛠 Built With
    • Tech Stack
    • Key Features
  • 🚀 Live Demo
• 💻 Getting Started
  • Setup
  • Prerequisites
  • Install
  • Usage
  • Run tests
  • Deployment
• 👥 Authors
• 🔭 Future Features
• 🤝 Contributing
• ⭐️ Show your support
• 🙏 Acknowledgements
• ❓ FAQ
• 📝 License

📖 Coders Hub

Coders-Hub application allows user to reverse different online classes depending on their preferences. They are the assigned a mentor for each course and also get to choose how long that want to participate on the course.

🛠 Built With

• HTML
• CSS
• JS
• React
• Redux
• Rails API

Tech Stack

Client

• JavaScript
• HTML
• CSS
• React/Redux
• Rails

Key Features

Using the project will help you to :

• See online classes to attend
• Reserve a class to attend

(back to top)

🚀 Live Demo

• Live Demo Link

(back to top)

💻 Getting Started

To get a local copy up and running follow these simple example steps.

Prerequisites

In order to run this project you need:

• Node js installed on your computer
• Npm Node package manager
• Terminal
• Code editor preferably Vscode.

Setup

👉 Clone this repository by using the command line :

• git clone https://github.com/manq2010/Book-An-Appointment-Front-End

👉 Clone back end repository by using the command line :

• git clone https://github.com/Cluab/Book-An-Appointment-Back-End

👉 Add the .env file to the root folder of the current repo (Front-End)

👉 Add the following lines on the .env file

REACT_APP_BACKEND="http://localhost:3000/api/v1"
REACT_APP_CLIENT_ID="tqiRUMtQta0eEw6lp3X9iPQK8n5ZlS7OmiKLK0eHJoI"
REACT_APP_CLIENT_SECRET="sAaKljs__17vKbKoVT8G_Jsw-dMrOP8N4i_aPBEjcLQ"

NB: Using the above details on your .env file will not work as each devices needs its unique REACT_APP_CLIENT_ID and REACT_APP_CLIENT_SECRET details, use the step below to generate for your device

👉 Please use this link to go to the back-end part of this project.

👉 On the Back-End Repo, run the seed file by using the command line :

• rails db:seed

👉 Open rails console by using the command line from the Back-End repo cloned above:

• rails c

👉 Run the following code on the rails console :

• Doorkeeper::Application.find_by(name: 'React')

👉 Replace the REACT_APP_CLIENT_ID on the .env file with the id shown on the console :

uid: "tqiRUMtQta0eEw6lp3X9iPQK8n5ZlS7OmiKLK0eHJoI"

👉 Run the following code on the rails console :

• Doorkeeper::Application.find_by(name: 'React').secret

👉 Replace the REACT_APP_CLIENT_SECRET on the .env file with the id shown on the console :

=> "sAaKljs__17vKbKoVT8G_Jsw-dMrOP8N4i_aPBEjcLQ"

NB: The .env file should look similar to the example above once your unique id and secret key are generated

Install

Install this project with:

• for the front end rep

npm install

• for the back end repo

bundle install --force

Usage

To run the project, execute the following command:

• for the back end repo

rails s

• for the front end rep

npm start

NB: Start the back end server first

Login

Use the below details to login as admin

email: [e-mail]
password: password

NB: Ensure the rails db:seed was run from above for the admin role to work.

If you want to login as normal user, follow the sign-up process.

NB: If you not able to sign-in, kindly refresh page and try to sign-in again

Run tests

To run tests, run the following command:

npm test

Deployment

You can deploy this project using:

npm run deploy

(back to top)

Authors

👤 Mancoba Sihlongonyane

• GitHub: @manq2010
• Twitter: @mancoba_c
• LinkedIn: mancobasihlongonyane

👤 Ibrahim Suhail Al-Yousefi

• GitHub: @cluab
• Twitter: @cluab122
• LinkedIn: Ebrahim Al-Yousefi
• Instagram: @27.i.b

👤 Krishna Prasad Acharya

• GitHub: @krishnabot
• Twitter: @last_matrix
• LinkedIn: @Krishnabot

👤 Frehiywot Nega

• GitHub: @frnega
• Twitter: @twitter
• LinkedIn: @frehiywot-nega

👤 Idrissa makoba omar

• GitHub: omarbabou
• LinkedIn: Idrissa makoba omar
• twitter: BabouOmar3

(back to top)

Kanban board

👉 Kanban board link

👉 Kanban board Development link

👉 This project was authored by Four contributors as described in the the Authors section bellow.

👉 Please use this link to go to the back-end part of this project.

🔭 Future Features

• Remove reservations made by user
• Add email confirmation to access website when creating a profile
• Edit online classes and reservation

(back to top)

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

(back to top)

⭐️ Show your support

Give a ⭐️ if you like this project!

(back to top)

🙏 Acknowledgments

• Thank you Microverse for the project
• Original design by Murat Korkmaz

(back to top)

❓ FAQ

• How to use the project

  • git clone https://github.com/manq2010/Book-An-Appointment-Front-End

• How to contribute to the project

  • Fork it by using fork button, or you can contact me.

(back to top)

📝 License

This project is MIT licensed.

(back to top)