DEV Community

Cover image for I built a social network for developers to showcase their projects
Nitin Ranganath
Nitin Ranganath

Posted on

I built a social network for developers to showcase their projects

TL;DR: Driwwwle is an open-source social network to showcase your projects with like, comments, notifications, profiles and real-time chat.

As developers, we like to look out for new and exciting projects or products. However, finding them is not the easiest task out there. Sure, you can scroll through GitHub's trending section to find a lot of awesome products but what if it is closed source?

Things aren't so hard for designers though. They can visit a website like Dribbble or Behance and enjoy the thousands of creative designs easily. What if we had something like Dribbble, but for developers?

Introducing Driwwwle

Driwwwle is a social network for developers to showcase their projects or products with other developers across the globe. Just like any other social network out there, you can like posts, save them privately, leave a comment and follow your favorite developers to build your own personal feed.

Some of the other features include:

⚡ Server-side rendering with Next.js
🍪 Cookie-based authorization with JSON web tokens
📜 Infinite scrolling feed with React Query
🖼️ Cloud image upload with Cloudinary
❤️ Like, save, and comment on posts
💬 Realtime chat with Socket.io
🤝 Follow developers and build personal feed

and a lot more..

Sounds interesting? I would love for you to create an account on Driwwwle and post your awesome creations.

Did I mention that Driwwwle is also open-source? You can browse through the code on this GitHub repo:

GitHub logo itsnitinr / driwwwle

The social network for developers. Discover creative websites and build a community.

Driwwwle

The Social Network for Developers












Features

⚡ Server-side rendering with Next.js
🍪 Cookie-based authorization with JSON web tokens
📜 Infinite scrolling feed with React Query
🖼️ Cloud image upload with Cloudinary
❤️ Like, save and comment on posts
💬 Realtime chat with Socket.io
🤝 Follow developers and build personal feed
and a lot more..

Running Locally

Clone this repository and install dependencies by running:

npm install
#or
yarn install

Create a new file named config.env with the following environment variables in the root of the project folder:

PORT = 
MONGO_URI = 
JWT_SECRET = 
CLOUDINARY_CLOUD_NAME = 
CLOUDINARY_API_KEY = 
CLOUDINARY_API_SECRET = 
SENDGRID_API_KEY = 
SENDER_EMAIL = 

Create a new file named .env.local with following configuration:

NEXT_PUBLIC_BASE_URL = http://localhost:3000

For development mode, run:

npm run dev

For production mode, run:

npm run build
npm start

Visit http://localhost:3000 or your custom port environment variable to view the app.

Screenshots

Banner Image














Landing Page Search







Personal Feed





Some more screenshots

A picture speaks a thousand words but more importantly, I hope it excites you enough to give Driwwwle a try. Here are some screenshots, thanks to MockupBro for the awesome mockups.

Landing PageAdd New PostSearchFeedPosts & Profile page

Suggestions and feedback welcome!

Driwwwle is in its initial stages at the moment and I would highly appreciate any feedback, suggestions and questions you would like to provide. What features would you like to see? What seems unnecessary or what's causing difficulties?

Thank you for your time and I await to see your posts on Driwwwle soon. Until then, have a nice day!

Top comments (18)

Collapse
 
jayjeckel profile image
Jay Jeckel

Interesting idea and much props for building a site! However, there are a few things that should be pointed out.

First, looking at the site's github repo, the project source is publicly visible but it isn't open source. To be open source a project must have a permissible license, such as MIT, GPL, Apache, etc. Without a license, the project is proprietary and using the source is technically copyright infringement.

Additionally, the site's landing page doesn't have links to any of the information a cautious user wants to see before signing up, such as Terms of Use, Privacy Policy, and an About page. Every website should have these three pages available from every other page of the site and especially from the landing page.

Collapse
 
itsnitinr profile image
Nitin Ranganath

Hi Jay, these are some extremely valid points. Thanks for bringing them up. It must've slipped through my mind but I'll get started right away. Appreciate you taking your time for letting me know!

Collapse
 
ptheodosiou profile image
Pantelis Theodosiou

Hello @itsnitinr, looks awesome project!
Nice work!

Note: still waiting for the verification email :)

Collapse
 
itsnitinr profile image
Nitin Ranganath • Edited

Hi there! Thanks for signing up. Could you please check your promotions tab if you're using Gmail? If you're using Yahoo, you might find the email in the 'Unread' folder. It would've probably ended up there :)

Let me know if you still haven't received it. I'll be happy to send you from my personal email.

Collapse
 
monchoz profile image
Ramon Zuniga

Bookmarked! Congrats!

Collapse
 
itsnitinr profile image
Nitin Ranganath

Thank you so much!

Collapse
 
pandademic profile image
Pandademic

Great Job!

Collapse
 
deepcodes profile image
Deepankar Bhade

Are you planning a Product hunt launch?

Collapse
 
itsnitinr profile image
Nitin Ranganath

Indeed, hopefully within the next 10 days. Just wanted to get some feedback prior to the ProductHunt launch.

Collapse
 
mastermindlegion profile image
MasterMindLegion

Wow, great idea. I will join soon! How have you done the video ? It’s amazing!

Collapse
 
itsnitinr profile image
Nitin Ranganath

Thank you! Excited for you to join :)

The video is made using Adobe After Effects and free template that you can find here: youtube.com/watch?v=GzTQFCHzgok

Collapse
 
vinaysehwag14 profile image
VinaySehwag14

Good job man , inspired me bro …🔥

Collapse
 
itsnitinr profile image
Nitin Ranganath

I'm really glad to hear that

Collapse
 
ranemihir profile image
Mihir Rane

Great project! Well done :)

Collapse
 
itsnitinr profile image
Nitin Ranganath

Thank you!

Collapse
 
itsnitinr profile image
Nitin Ranganath

Thank you so much for checking it out!

Collapse
 
mannuelf profile image
Mannuel

Awesome work, signed up! Good luck with the project I'm sure it will do great.

Collapse
 
itsnitinr profile image
Nitin Ranganath

Thank you so much! I'm really glad you feel so. Hoping to see your posts too :)