https://github.com/skycooper/contactappfirebase
Project aims to create an Contact App using React with Google Firebase
https://github.com/skycooper/contactappfirebase
firebase google-firebase material-ui react react-icons toastify
Last synced: about 2 months ago
JSON representation
Project aims to create an Contact App using React with Google Firebase
- Host: GitHub
- URL: https://github.com/skycooper/contactappfirebase
- Owner: SkyCooper
- Created: 2022-11-19T08:25:02.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-12-14T10:15:42.000Z (over 3 years ago)
- Last Synced: 2025-01-04T21:18:08.676Z (over 1 year ago)
- Topics: firebase, google-firebase, material-ui, react, react-icons, toastify
- Language: JavaScript
- Homepage: https://cooper-contact-app.onrender.com/
- Size: 26.1 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Project : Contact App Firebase
## Check The Live Website ➡️ [Live Website](https://cooper-contact-app.onrender.com/)
## Visualization of the Website
## Description
Project aims to create an Contact App using React.
## Learning Outcomes
At the end of the project, you will be able to;
- improve coding skills within HTML & CSS & JS & ReactJS.
- use git commands (push, pull, commit, add etc.) and Github as Version Control System.
## Problem Statement
- We are adding a new project to our portfolios. So you and your colleagues have started to work on the project.
## Project Skeleton
```
Project(folder)
|
|----README.md
├── public
│ └── index.html
├── src
│ ├── components
│ │ ├── contacts
│ │ ├── Contacts.js
│ │ ├── form
│ │ ├── FormComponent.js
│ ├── utils
│ │ ├── firebase.js
│ │ ├── functions.js
│ │ ├── toastify.js
│ ├── App.js
│ ├── App.css
│ ├── index.js
│ ├── index.css
├── env
└── package.json
```
### Dependencies
- react-router-dom@6.3
- google-firebase
- toastify
- react-icons
- material ui
### Overview
I mastered HTML & CSS & JS & ReactJS features in this project.
You can see the visual representation of the website above.
## Notes
- Step 1: Create React App using `npx create-react-app project-name`
- Step 2: Push your application into your own public repo on Github
- Step 3: Add project gif to your project and README.md file.
## Resources
- 🔥 You can use [`firebase`](https://firebase.google.com/) for your own work.
## Support
- Open an Issue, I will check it a soon as possible 👀
- Don't forget to show your support by ⭐ the project!!
## Quick start
- Clone this repo using git clone https://github.com/SkyCooper/ContactAppFirebase.git
- Move to the appropriate directory: cd recipe-app.
- Run npm run install in order to install dependencies and clean the git repo.
- Change configurations in /src/config/config.js according to your cosmicjs bucket.
- Run npm run dev to start the project in dev mode.
- Run npm run build to build the project in /dist folder.
- Now you're ready to rumble!
## Contributing
- Fork it (https://github.com/SkyCooper/ContactAppFirebase)
- Create your feature branch (git checkout -b feature/fooBar)
- Commit your changes (git commit -am 'Add some fooBar')
- Push to the branch (git push origin feature/fooBar)
- Create a new Pull Request
# ⌛ Happy Coding ✍