GiftList

A React TS project with Firebase Realtime Database

View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Roadmap
4. Contributing
5. Contact
6. Acknowledgments

About The Project

The app allows you to organize and save gift ideas, all neatly categorized by the recipients and the special occasions they're meant for. Never forget a birthday, anniversary, or holiday again, and always find the right gift at the right time.

I experimented with Firebase using React TS and Tailwindcss, I also was curious to try Vite.

The project is deployed on a Netlify server.

(back to top)

Built With

• 
• 
• 
• 
• 
• 

(back to top)

Getting Started

This is an example of how to set up your project locally. To get a local copy up and running follow these steps.

Prerequisites

1. Node.js installed
2. Code editor — I prefer Visual Studio Code
3. Google account — we need this to use Firebase
4. Basic knowledge of React

Installation

1. Create a new realtime database in firebase admin

2. Using import JSON from the admin, add data.json file from this repo as a starting point

3. Publish your firebase project and get the config variables, it should look something like:

   const firebaseConfig = {
     apiKey: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
     authDomain: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
     projectId: "XXXXXXXXXXXXXXXXX",
     storageBucket: "XXXXXXXXXXXXXXXXXXXXXXXX",
     messagingSenderId: "XXXXXXXXXXXXXXX",
     appId: "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
   };

4. Clone the repo

   git clone https://github.com/your_username_/Project-Name.git

5. Install NPM packages

   npm install

6. Create a .env file and paste your firebase config variables into it

   VITE_FIREBASE_API_KEY=*******
   VITE_FIREBASE_AUTH_DOMAIN=*******
   VITE_FIREBASE_DATABASE_URL=*******
   VITE_FIREBASE_PROJECT_ID=*******
   VITE_FIREBASE_STORAGE_BUCKET=*******
   VITE_FIREBASE_MESSAGING_SENDER_ID=*******
   VITE_FIREBASE_APP_ID=*******

7. Run locally your project

   npm run dev

8. Check out the http://127.0.0.1:5173/ on your browser

(back to top)

Roadmap

• Fetch data using onValue method
• Implement Edit & Remove & Add features for persons / gifts lists / gift items
• Deploy on Netlify
• Add authentication using firebase auth
• Enhance features
  • Add photos to people list using firebase file uploads
  • Add a datepicker to use dates on giftlists

See the open issues for a full list of proposed features (and known issues).

(back to top)

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.

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

(back to top)

Contact

David Schinteie

Project Link: https://github.com/davidschinteie/giftlist

(back to top)

Acknowledgments

Useful resources that I find helpful and would like to give credit to. I've included a few of my favorites to kick things off!

• How to Use Cloud Firestore in a React App
• How to Connect Firebase Realtime Database to a React app
• Firebase as simple database to React app
• Firebase documentation for Realtime Database
• Read, Write, and Delete Data from the Realtime Database
• Best Practices: Arrays in Firebase
• Fireship tutorial: Firebase - Ultimate Beginner's Guide
• Official Firebase tutorial: Getting started with Firebase for the web – Firebase Fundamentals
• Github Readme template

(back to top)