RNtaate / norpgram

An image uploading and displaying Single Page Application built in React js and using Firebase as a backend as well as storage.

NorpGram

Project Description

This project is an image uploading and sharing Single Page Application(SPA) built using React JS and Firebase.

It is built to display and demonstrate my unnderstanding of Firebase, Firebase-Authentication, and Firebase-Storage.

It allows a user to Sign Up and Login, upload an image of their choice, and view other images uploaded by other users.

Future Features:

• Writing a message along with an uploaded image
• Viewing the user that uploaded a specific image
• Commenting on and liking an uploaded image.

Screenshots

Login Page	Signup Page

Dashboard Page	Image View

🔧 Built with

• ReactJS
• Yarn
• Firebase
• React Bootstrap

🔴 Live Demo

• Live Demo

Get started

Prerequisites

• Node Package Manager(npm) OR Yarn
• Node
• Firebase Account

Steps to follow

1. Clone the repository to your local machine by running git clone [e-mail]:RNtaate/norpgram.git in your terminal

2. On your local machine, navigate to the project folder using cd norpgram in your terminal

3. Run npm install or yarn install to install all the necessary dependencies.

4. Run npm run build or yarn run build

5. Run npm start or yarn start to start the application on a local server

Note:

Create the environment variables corresponding with the variable names in src/firebase/firebase.config.js file before building and running the application.

🤝 Contributions

There are two ways of contributing to this project:

1. If you see something wrong or not working, please check the issue tracker section, if that problem you met is not in already opened issues then open the issue by clicking on new issue button.

2. If you have a solution to that, and you are willing to work on it, follow the below steps to contribute:

   1. Fork this repository

   2. Clone it on your local computer by running git clone [e-mail]:RNtaate/norpgram.git Replace RNtaate with the username you use on github

   3. Open the cloned repository which appears as a folder on your local computer with your favorite code editor

   4. Create a separate branch off the master branch or main branch,

   5. Write your codes which fix the issue you found

   6. Commit and push the branch you created

   7. Raise a pull request, comparing your new created branch with our default branch here

✒️ Authors

👤 Roy Ntaate

• Github: @RNtaate
• Twitter: @RNtaate
• Linkedin: roy-ntaate

Show your support

Give a ⭐️ if you like this project!

Acknowledgements

• The Net Ninja
• Web Dev Simplified