This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm i
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

References

The following resources were used to build this application:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.
• How to Use Cloud Firestore in a React App
• Formik docs

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Other references used to create this app

• Integrating Firebase with a Next.js app Documentation
• Firebase CLI reference

Added CSV data to Firestore Firebase using FireFoo

• The Powerful GUI Client for Firebase Firestore

For data fetching (removed later)

• SWR - React Hooks for Data Fetching

Querying Firestore

• TypeScript in React – How to Manage State with Firebase Cloud Firestore
• Cloud Firestore Compound (AND) queries

Resources used when testing out Firestore emulator

• Using Firebase Emulator Suite and React for local-first development
• How to setup a Firebase demo project
• Google's Firebase Emulator Suite Tutorial
• I installed Firebase Emulator for localhost dev. How do I configure my environment to call the emulator?
• Setting up the Firebase Emulator for local development.

Lessons learnt the hard way......

1. Problem with my solution:

• The 'Used Car Price Prediction Dataset' CSV file from Kaggle had >4k entries which were imported into the database.
• While writing my code and setting up the configurations I hit the daily quota for Firebase Cloud Storage (being 50K document reads) without realizing.
• I created a new project on Firebase and imported a new set of data, which had fewer number of entries (50).
• During my search I stumbled across local emulator suites which I set up with the help of Firebase documentations and makerkit Article so this issue doesn't happen again.

2. Problem with my solution:

• The biggest hurdle after researching and successfully implementing Firestore querying was trying to figure out how to pass the search parameters from the home page (where the user entered what they want) to the display page. I googled terms like 'Next.js 14 app router pass form data to another page' or 'Next.js 14 React query data page' and so on. After 2 stressful days (and yes I did go to bed crying) of non-stop research with many trial and errors, I used the following resources to get the data transfer between pages to work:

• How to change the URL parameters in real time using Next.js 14
• How to access query parameters in Next.js 13.4 with the new app router?
• Other resources I came across during my search: Diving into Server Actions in Next.js 14; Forms with Next.js and Server Actions + Using Forms in Next.js (Server Actions, Revalidating Data)

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.