Mentorship Diary Application

Our project brief was to build an app that would enhance the School of Code mentoring experience and the solution that the team of 4 people I was working in, managed to come up with in less than a week was this tool that allows School of Code bootcampers to track and document their mentor/mentee relantionship.This is basically an online diary of the School of Code bootcamper mentorship journey.

The application consist of a Home page:

Weekly Form where mentee can go through a predefine set of questions together with their mentor.The questions are set with placeholder text to help guide the discussion.

The data is unique to user and can be viewed on the Achievement History page by selecting the prefered week to review.

We also added in a Contact page with School of Code contacts.

The Authentication was done using Firebase .

If you want to see the backend code of this application head to this repository.

Live Project

Here is the deployed version.

Stack

• React
• Firebase
• React Bootstrap
• Netlify

Getting started

1. Clone the repo: https://github.com/vmilitaru/Mentorship-Diary-client.git

2. Download the required npm modules: npm i

Configuring Firebase

3. Create a project at the Firebase console.

4. Get your authentication credentials from the Firebase console under Project settings > General> Your apps Add a new web app if you don't have one already.

5. Go to Build, click on Authentication and in the Sign-in method tab enable Email/Password authentication method of the app.

Set up environment variables

To connect the app with Firebase, you'll need to add the settings from your Firebase application as environment variables.

6. Copy the content of .env.example into a new file called .env.local.

7. Set the appropriate environment variables in the .env.local file at the root of this project:

   • REACT_APP_FIREBASE_API_KEY, REACT_APP_FIREBASE_AUTH_DOMAIN, REACT_APP_FIREBASE_PROJECT_ID, REACT_APP_FIREBASE_STORAGE_BUCKET, REACT_APP_FIREBASE_MESSAGING_SENDER_ID, REACT_APP_FIREBASE_APP_ID - Can be found in the Firebase console under Your Project>Project settings > General> Your apps>Firebase SDK snippet choose Config to get the configuration as JSON .

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

npm run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.
Your app is ready to be deployed!

See the section about deployment for more information.

Deploy on Netlify

You can deploy this app to the cloud with Netlify (Documentation).

Deploy Your Local Project

To deploy your local project to Netlify, push it to GitHub/GitLab/Bitbucket.

• If you haven't done this already go to netlify and sign up for a free account.

• Once you are loged in to your account you will be redirected to your Dashboard.

• Here you have the option to create a new site by clicking New site from Git button.

• The Git provider that we are going to use for now is GitHub so before selecting this option make sure you've pushed up the latest code that you want to deploy.

• Select the GitHub account where your repository is and search the repo you want to connect with.

• Click on the repository returned by search.

• Choose the branch that you want to deploy.

• Check that the build commmand matches the one from the package.json file of the project.

Important: Before clicking the Deploy site button we need to connect the app with our server and specify our Environment Variables in the deployed application.

• Go to Show advanced option and click New variable setting, here you will be able to insert all your Environment Variables from your .env.local file. 👉 how to name your environment variables in a React App

• Click the Deploy site option.

• If you go to the Deploy tab and after click Building you will be able to see the deployment progress and when the site goes live.

• Once the site is live you can Preview your deployed app, but probably by now you've seen the error message from Firebase with unauthorized domain or domain not found and to fix this issue there is one more step to do.

• Go to Firebase console and under Your Project> Authentication> Sign-in-method> Authorised domains add the site domain from Netlify.

Contributors ✨

Freshta Ebrahim

Valentina Militaru

Carl McIntosh

Jon Owens