CRUD-Operation-Using-Next.js-TypeScript-TailwindCSS-with-Firebase-Database-And-Docker-Deployment

Simple Dashboard Page Task

This project is a simple dashboard page built with React.js and Firebase, utilizing TypeScript for static typing, Tailwind CSS for styling, and Docker for deployment to Firebase.

Features

• Add new items with fields for First Name, Last Name, Address, and Age.
• View a list of existing items with the ability to edit or delete each item.
• Edit existing items and update them in the Firebase database.
• Delete existing items from the Firebase database.

Technologies Used

• React.js: A JavaScript library for building user interfaces.
• TypeScript: A statically typed superset of JavaScript that compiles to plain JavaScript.
• Firebase Firestore: A flexible, scalable database for mobile, web, and server development.
• Tailwind CSS: A utility-first CSS framework for creating responsive and customizable designs.
• Docker: A platform for developing, shipping, and running applications in containers.

Getting Started

To run this project locally, follow these steps:

Clone the repository:

git clone https://github.com/your-username/simple-dashboard.git

Navigate to the project directory:
bash

cd webapp
Install the dependencies:
bash

npm install
Set up Firebase Firestore:
Create a Firebase project at https://console.firebase.google.com/
Add a web app to your Firebase project.
Copy your Firebase configuration object.
Paste your Firebase configuration object into src/firebase.ts.
Enable Firestore in your Firebase project.
Run the development server:
bash

npm start
Open your browser and visit http://localhost:3000 to view the app.
Deploying with Docker to Firebase
To deploy the app to Firebase using Docker, follow these steps:

Build the Docker image:
bash

docker build -t simple-dashboard .
Run the Docker container:
bash

docker run -p 3000:3000 simple-dashboard
Open your browser and visit http://localhost:3000 to view the app running inside the Docker container.
Deploy the Docker container to Firebase (replace your-project-id with your Firebase project ID):
bash

firebase deploy --only hosting
Contributing
Contributions are welcome! If you'd like to contribute to this project, please follow these steps:

Fork the repository.
Create a new branch (git checkout -b feature/new-feature).
Make your changes.
Commit your changes (git commit -am 'Add new feature').
Push to the branch (git push origin feature/new-feature).
Create a new pull request.

thank you....