Al Mentoria is a virtual space to connect with mentors that can help you with your technical as well as behavioral issues

Last update: Jul 28, 2022

TABLE OF CONTENTS
  1. About The Project
  2. Getting Started
  3. Usage
  4. Contributing
  5. Authors
  6. Acknowledgments
  7. License

About The Project

Al Mentoria is a virtual space to connect with mentors that can help you with your technical as well as behavioral issues. If you are stuck somewhere and need a second look at things, make a reservation now.

Sneak peak

Screenshots

⬆️

Built With



⬆️

Getting Started

This project depends on this API backend

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

Prerequisites

  • Node: v16.13.1
  • Javascript enabled browser

Installation

  1. Clone the repo:
    git clone [email protected]:UpliftLab/al-mentoria-frontend.git
  2. go to the project folder:
    cd al-mentoria-frontend
  3. Install the dependencies:
    npm install
  4. Set the backend server address in the src/config.json file:
     {
       "BASE_URL": "link_to_backend_server"
     }
  5. Start the server:
    npm start
  6. Enjoy

⬆️

Usage

For an easy access to the website please use this link

⬆️

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.

Please, take a look at open issues for a full list of proposed features (and known issues).

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

⬆️

Authors

👤 Soufiane Boursen

👤 Ammar Hamlaoui

👤 Mostafa Ahangarha

👤 Awais Amjed

⬆️

Acknowledgments

⬆️

License

Distributed under the AGPL License. See LICENSE for more information.

⬆️

GitHub

https://github.com/UpliftLab/al-mentoria-frontend
Comments
  • 1. First release

    Description

    This is the first release of Al-Mentoria; a virtual place for students and mentor to meet. Admin can create mentors and add Topics with rating based on each mentor expertise. Everyone can make an account and reserve a meeting time with a mentor based on one of their topics. Users can also see the list of their reservations.

    Screenshot

    In this release we have built the project requirements given by Microverse.

    Key features:

    • Used React 18
    • Used Redux + Redux-toolkit for state management
    • API authentication using JWT token
    • RESTful API
    • Deployment on Heroku at https://almentoria.herokuapp.com

    Link to the PR in back-end project

    Reviewed by ahangarha at 2022-07-20 15:50
  • 2. 7 authentication pages

    Description

    Features:

    • [x] Add login page (email, password).
    • [x] after successful login, the JWT token get stored in localStorage.
    • [x] Add sign up page (name, email, password, password-confirmation).
    • [x] Add sign-out functionality (remove the JWT token from localStorage and from the redux store).

    image

    Cheers,

    Reviewed by Sboursen at 2022-07-15 10:17
  • 3. 4 mentor details

    In this PR I did the following:

    • [x] Add a route to react-router.
    • [x] It shows the mentor's photo
    • [x] It shows the name, and the bio, ratings.
    • [x] Has a back button to the home page.
    • [x] Has a button on the reservation page.
    • [x] It redirects the user to the mentors' page if there is no mentor with the ID specified in the link.

    image

    Reviewed by mirouhml at 2022-07-14 20:49
  • 4. 35 improve UI

    In this PR I did the following:

    • [x] Make mentor photo rounded in mentors page
    • [x] Limit the size and improve positioning of mentor photo in detail page
    • [x] Limit characters of bio in mentors page.
    • [x] Add back button to the mentor details page for mobile.
    • [x] Change placeholder for password.
    • [x] Add required for input fields of the sign in page.

    image

    Reviewed by mirouhml at 2022-07-21 13:42
  • 5. Unit tests for redux actions

    I have added unit tests for redux slices in:

    • [x] User
    • [x] mentors
    • [x] MentorDetails
    • [x] AddMentor
    • [x] AddReservation

    Also partially added test for

    • [x] Reservations

    image

    Reviewed by ahangarha at 2022-07-21 13:11
  • 6. [1pt] Improve UI

    • [x] Make mentor photo rounded in mentors page
    • [x] Limit the size and improve positioning of mentor photo in detail page
    • [x] Limit characters of bio in mentors page.
    Reviewed by mirouhml at 2022-07-21 11:31
  • 7. 24 professional documentation front end

    Description

    • [x] Add a professional Readme doc to the repo.
    • [x] Mention the original design creator.
    • [x] Add a placeholder for the app live link.
    • [x] Add a placeholder for the app demo.

    image

    Cheers,

    Reviewed by Sboursen at 2022-07-20 15:10
  • 8. 22 bug fix 2 front end

    In this PR I did the following:

    • [x] Change the mentor photo in mentor details to object-cover instead of object-contain.
    • [x] Change notification for no topic found in mentor detail page to show a message in place of topics
    • [x] Fix date comparison on the reservations page.

    image

    Reviewed by mirouhml at 2022-07-20 14:14
  • 9. Create page for adding topic to a mentor

    • [x] In mentor details page, admin can see an add button under list of topics. The link takes the admin to another page to add topics to the mentor. This page can be at mentors/id/topics.
    • [x] In this page, admin can see list of existing topics (mentorTopics) and can add topic + rating or remove an existing one.
    Reviewed by ahangarha at 2022-07-19 20:41
  • 10. 6 add mentor page

    In this PR, the following changes were introduced:

    • [x] It has a form with (name, photo, bio).
    • [x] It should be available only for admins
    • [x] After the successful creation of a mentor, we redirect the newly created mentor detail page

    image

    Reviewed by awais-amjed at 2022-07-19 10:07
  • 11. Professional Documentation - front-end

    • [x] Add a professional Readme doc to the repo.
    • [x] Mention the original design creator.
    • [x] Add a placeholder for the app live link.
    • [x] Add a placeholder for the app demo.
    Reviewed by Sboursen at 2022-07-19 08:55
A Disney+ Clone that you can sign in with your Google AccountA Disney+ Clone that you can sign in with your Google Account

Disney+ Clone with ReactJS A Disney+ Clone that you can sign in with your Google Account. Click demo to try it by yourself! Disney+ Clone Demo Link Yo

Jun 30, 2022
Solvent Connect Wallet - A react web app that help its users to see information about the connected wallet and make airdrop or send solana
Solvent Connect Wallet - A react web app that help its users to see information about the connected wallet and make airdrop or send solana

Solvent Connect Wallet - A react web app that help its users to see information about the connected wallet and make airdrop or send solana

Aug 1, 2022
A Whatsapp Clone which built with reactJS. You can sign in with your Google Account and you can chat in real time.

Whatsapp Clone with ReactJS In this app you can create a simple chat room and send messages to each other using our google accounts in the room. Whats

Nov 24, 2021
A MERN-based collaborative virtual learning platform to help learners find like-minded peer groups and filter through the available plethora of resources.
A MERN-based collaborative virtual learning platform to help learners find like-minded peer groups and filter through the available plethora of resources.

A MERN-based collaborative virtual learning platform to help learners find like-minded peer groups and filter through the available plethora of resources.

May 24, 2022
A react hook to help manage mobile browser virtual keyboards

A react hook that calculates the distance that your components are offset and the size of the remaining viewport when iOS/Android mobile virtual keyboards open

May 4, 2022
This project was developed as a technical test for a Frontend JR Landing Page with dynamic data via .json
This project was developed as a technical test for a Frontend JR Landing Page with dynamic data via .json

Healthy Foods ?? ?? Informações sobre o projeto Esse projeto foi desenvolvido como teste técnico para uma vaga Frontend JR Landing Page com dados dinâ

Jul 21, 2022
This is memories application developed using React JS,mongo DB .We can perform CRUD operation in this app like create post,read post,make changes in previously posted post as well as delete post.
This is memories application developed using React JS,mongo DB .We can perform CRUD operation in this app like create post,read post,make changes in previously posted post as well as delete post.

Memories Front end - React,javascript,html,css Back end- NODE JS Application - This is memory application and it is a simple social media app that all

Jul 30, 2022
Codemore is the open platform to help you enhance your problem solving skill, expand your knowledge of data structures and algorithms.

Platform to help you enhance your problem solving skills, expand your knowledge of data structures and algorithms.

Jun 8, 2022
Stellar is an app that gives you real time information about what’s going on in space.

Stellar is an app that gives you real time information about what’s going on in space. Developed in Snack Expo using React Native. Check README.md to learn how to run the app.

Jun 22, 2022
A decision making app to help you decide where you should go to on a pub hopping adventure
A decision making app to help you decide where you should go to on a pub hopping adventure

A react based application designed to simplify the decision making process when out with friends during a pub crawl.

Jun 3, 2022
Open source platform to manage Firestore data in a spreadsheet-like UI, deploy Cloud Functions easily, and connect to your favorite third-party platforms.⚡️✨
Open source platform to manage Firestore data in a spreadsheet-like UI, deploy Cloud Functions easily, and connect to your favorite third-party platforms.⚡️✨

Open source platform to manage Firestore data in a spreadsheet-like UI, deploy Cloud Functions easily, and connect to your favorite third-party platforms.⚡️✨

Jul 30, 2022
The repo shows how to connect your React app to StarkNet

StarkNet.js + Cairo + Hardhat + React This repo shows how to connect your React app to StarkNet. Scripts helper mkdir -p build starknet-compile contra

Nov 28, 2021
An opensource platform to connect with awesome collaborators to work with your side-projects✨
An opensource platform to connect with awesome collaborators to work with your side-projects✨

ProStack ?? An open-source platform ?? to peep into some highly interesting and exciting projects & connect with those project's owner for collaborati

Jul 18, 2022
The bookstore where you can store your best books that you read before. Built with React, Redux, and TailwindCSS.
The bookstore where you can store your best books that you read before. Built with React, Redux, and TailwindCSS.

Bookstore Project In this project, I set up my Bookstore project. It is about making a Bookstore with 2 section BOOKS and CATEGORIES (styles and funct

Aug 28, 2021
A React application to help you and your friends choose where to eat

EatsyPeasy A single page application to help you and your friends choose where to eat! Answer 3 simple questions to generate a customized selection of

Dec 22, 2021
Security, performance, marketing, and design tools — Jetpack is made by WordPress experts to make WP sites safer and faster, and help you grow your traffic.

Jetpack Monorepo This is the Jetpack Monorepo. It contains source code for the Jetpack plugin, the Jetpack composer packages, and other things. How to

Aug 5, 2022
SOS MOTO - a mobile application written in React Native that allows you to call a nearest contact from your GPS location to get a quick help
SOS MOTO - a mobile application written in React Native that allows you to call a nearest contact from your GPS location to get a quick help

SOS MOTO is a mobile application written in React Native that allows you to call a nearest contact from your GPS location to get a quick help. We have over 10k active users in Europe and steadily growing.

Jul 11, 2022
This uses Azure AI Text Analytics services to teach on how to connect an AI service to a web-based system

Azure AI: Text Analytics services using react This app uses the Azure text analytics services to call various services such as sentiment analysis, ent

Jun 7, 2022
Social Media mobile app that allows users to connect via QR scanning. Built-in React Ionic together with @Mic01.

Tap-n-Chat Mobile Messaging app that allows the user to login/signup and message other users. The app is able to generate and scan QR codes to add use

Dec 26, 2021