Rawallon / trello-clone-next

Just a Trello clone. From auth to boards update with websockets.

Nello

Not just a trello clone

🎯 About

Nello was initially created to be a Trello clone but it just kept expanding to full fledge project.
With this project the goal was to expand my knowledge with library I had heard but never got the chance to use it (or use it in depth). Which was the case for both Next API routes and websockets, with both I had some familiarity but never tried to bend this far to see what were they capable.

PS: If you're looking at this because you're interested in DnD, you might want to check this other repo where I implement it without any external library.

Go try it and please let me know if you enjoyed it with a ⭐️, I would appreciate it a lot.

✨ Functionality

✔️   User auth (Sign In/Sign out)
✔️   Social login
✔️   No back-end needs (uses Next API Routes)
✔️   Real-time updates with websockets
✔️   Trello-like kanban board
✔️   Fully implemented board, lists and cards CRUD
✔️   Server-side rendering

📸 Video

fElZT4Mlry.mp4

Websocket in action

d7rPYv4CtD.mp4

▶️ Demo

Here you can find the demo link:

PS: Websockets are not supported in this demo.

🚀 Technologies

Front end

• ReactJS
• Typescript
• NextJS
• Marked
• Next Auth
• React Beautiful DnD

Back end

• MongoDB
• Socket.io
• jsonwebtoken
• bcrypt

• Vercel for the deploy and CI.

Deploy configuration steps

1. Connect your GitHub account
2. Select the project
3. In Settings → Environment Variables → Set Environment variables.

👨🏻‍💻 Run Locally

✅ Requirements

Before starting 🏁, you need to have Git and Node installed.

# Clone and access the folder
$ git clone https://github.com/Rawallon/trello-clone-next.git && cd trello-clone-next

# Install the dependencies
$ npm install

# Configure your .env.local following the .env.exemple

# Run the web server
$ npm start

Since you've made this far don't forget to ⭐️ to let me know if you enjoyed! 🤗