https://github.com/priyoraven/quote-writter
A small practice project which gets some quotes with author name from the user and sends it to database which is then fetched from the database and shown.
https://github.com/priyoraven/quote-writter
react-hooks react-router reactjs
Last synced: 4 months ago
JSON representation
A small practice project which gets some quotes with author name from the user and sends it to database which is then fetched from the database and shown.
- Host: GitHub
- URL: https://github.com/priyoraven/quote-writter
- Owner: PriyoRaven
- Created: 2024-09-11T18:00:00.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2024-09-16T17:12:17.000Z (over 1 year ago)
- Last Synced: 2025-04-05T21:16:29.152Z (about 1 year ago)
- Topics: react-hooks, react-router, reactjs
- Language: JavaScript
- Homepage: https://react-practice-b18a1.web.app/quotes
- Size: 201 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Quotes adding website
This is a simple React app that allows users to submit quotes with the author's name and saves them to a Firebase database. The quotes are then fetched and displayed on the app. This was actually a practise project to get a better hold on React.
## Features
- Add new quotes with author names
- Store quotes in Firebase
- Fetch and display quotes from the Firebase database
## Language technologies used
- React: Frontend framework
- Firebase: Backend for storing and retrieving quotes
## Demo
Check out the live version of the app [here](https://react-practice-b18a1.web.app/quotes)
## Prerequisites
- Nodejs
- npm
- Firebase account
## Getting Started
If you want to run this project on your local machine, then follow these steps.
### 1. Clone the repository
```bash
git clone https://github.com/PriyoRaven/quote-writter.git
```
### 2. Navigate into the project directory
```bash
cd quotes-writter
```
### 3. Install dependencies
Use npm to install all required dependencies:
```bash
npm install
```
### 4. Set up Firebase
You need to configure Firebase to store and retrieve quotes.
1. Create a Firebase project [here](https://console.firebase.google.com/).
2. Set up Firestore as the database.
3. Go to **Project Settings** > **General** and find your Firebase config.
4. Create a `.env.local` file in the root of your project and add the following configuration:
```bash
REACT_APP_FIREBASE_DOMAIN=https://your-firebase-database-url
```
### 5. Run the project locally
Start the development server:
```bash
npm start
```
Open the app in your browser at `http://localhost:3000`.
### 6. Build the project (optional)
If you want to create a production build of the app:
```bash
npm run build
```
### 7. Deploy to Firebase Hosting (optional)
If you want to deploy the app using Firebase Hosting:
1. Install the Firebase CLI:
```bash
npm install -g firebase-tools
```
2. Log in to Firebase:
```bash
firebase login
```
3. Initialize Firebase in your project:
```bash
firebase init
```
Choose **Hosting** during the setup and select your Firebase project.
4. Deploy the app:
```bash
firebase deploy --only hosting
```
## Contributing
Feel free to fork this repository and submit pull requests. Any contributions, issues, or feature requests are welcome.
## License
This project is open for learning and educational purposes. Please use it responsibly and ethically. If you use or modify this code, please give proper credit. The project is provided without any warranties, and the author assumes no responsibility for any misuse.
---