The Developers Network

A social network made for developers as a final project during the Full-Stack Web Developer Bootcamp at Spiced Academy in Berlin.
In a world increasingly populated by social media, I noticed the lack of one made specifically for developers. From this observation the idea was born to develop one that summarizes on the one hand the typical needs of a developer (such as having the ability to share formatted code in the chat) and on the other the more common ones of other social networks (such as add photos on your wall and be able to comment on them), which can hence complete a developer's profile, going beyond the mere professional sphere.
Thus DN was born: the developers network made by devolpers for developers.

Overview

• Technologies
• Setup
• Structure & features
• Preview
• Demo

Technologies

This project was created with:

• Front-End: HTML, SCSS, React.js (Hooks, Redux, React-Icons, MUI)
• Back-End: Node.js / Express (Csurf, Cookie Session, Bcrypt)
• Data & Cloud: PostgreSQL, Multer, AWS S3
• API & Others: Geolocation API, Socket.IO
• Testing: React Testing Library

Setup

First of all clone the repo on your own machine

git clone https://github.com/lmguerrini/developers-network.git

Go to the project directory

cd developers-network

Install all the dependencies required

npm install

For the sockets functionalities of the project you may also need to install all the related packages

npm install socket.io socket.io-client

Start the server

npm run dev

Now you should be ready to dive into DN at http://localhost:3000

Structure & features

• Welcome (logged out)

  • Opening Animation
    • Sign-in (w/ specific errors)
    • Log-in (w/ specific errors)
    • Reset password
      • 1st component: enter email address
      • 2nd component: enter code received by email (using AWS SES)
      • 3rd component: receipt of confirmation

• App (logged in)

  • Main Animation (on cover / background according to dark mode)
    • Profile:
      • Edit Account (edit name, surname, psw, email - log-out, account deletion)
      • Uploader (update your profile picture and store it to the cloud, using Multer and AWS S3)
      • Personal Developer Profile infos w/ two card animation
        • 1st card: main infos (editable intro / bio)
        • 2nd card: extra infos (editable education, skills, work, github, linkedin, languages, location w/ optional geolocation API for current location)
      • Personal Wall
        • Images/posts uploading and their deletion
        • Post comments and replies to comments w/ their deletion
    • Other Developer Profile:
      • Profile infos w/ two card animation
        • 1st card: main infos (viewable intro / bio)
        • 2nd card: extra infos (viewable education, skills, work, github, linkedin, languages, location w/ optional geolocation API for current location)
      • Wall
        • Images/posts viewing
        • Post comments and replies to comments w/ their deletion
    • My Developers Network:
      • Display all developers who are your friend
      • Display all developers who want to be your friend
    • Find Developers:
      • Look for Developers who joined DN - send them a friendhsip, check their wall out or just write them a PM
    • General Chat:
      • List of developers currently online
      • Write something in the chat for all DN members (w/ automatically formatted code)
    • Private Chat:
      • Write something to a specific developer member of DN (w/ automatically formatted code)
    • Notifications
      • List of all notifications: friendships, chat, private messages
      • Push notifications for new/deleted message in general or private chat, friend requests received or revoked, errors
    • Extra:
      • Log-out
      • Account deletion (w/ all related data stored on AWS)
      • Dark mode (w/ different animations according to mode in use)
      • Cross-platform optimization
        • Different interlinked animations according to device screen size
        • Tablet and Mobile responsiveness

Preview

Welcome animation

Registration & Login w/ specific errors

   

Reset password w/ AWS SES

App dark mode slide animation

Reactive background animation (w/ mouse move and clicking) detail

Profile card edit intro and extra infos w/ animation

Profile card different animation (w/ different screen size)

Wall section

Reply to wall comment and delete

Change profile picture

Edit account

Other profile different card animation

My developers network (w/ dark mode)

Look for developers in DN (w/ dark mode)

Chat (w/ formatted code) and online developers all in real time

Private messages (w/ formatted code)

Notifications page w/ push notifications

Tablet welcome optimization

Tablet profile page

Tablet app preview

Mobile welcome optimization

 

Mobile menu bar and dark mode

Mobile app preview

 

Demo

Experience it yourself at https://the-developers-network.herokuapp.com

---

DN™