A simple trello clone to track your task using Next.js, React Drag and Drop, and Firebase.
- User can add new card on Todo to make a new task
- User can drag and drop the cards to the Progress or Done column
-
Clone the repository
-
Install dependencies by running
npm install
- Create a new Firebase project at https://console.firebase.google.com/.
- Go to your project add add App with web platform with </> icon.
- Register the app and copy the Firebase config object (apiKey, authDomain, projectId, etc.).
- Create a
.env.local
file in the root directory of the project and add your Firebase config as environment variables:
NEXT_PUBLIC_FIREBASE_API_KEY=your-api-key NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your-auth-domain NEXT_PUBLIC_FIREBASE_PROJECT_ID=your-project-id NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your-storage-bucket NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your-messaging-sender-id NEXT_PUBLIC_FIREBASE_APP_ID=your-app-id
-
Run
npm run dev
-
Open http://localhost:3000 in your browser to view the app.