This project is a meeting platform for designer and web developer. People can create their own account, login or logout and edit their profile by uploading a picture or editing the bio. They can also delete their profile again or set a new password. Additionally other profiles can be viewed, users can search for friends send friendship requests to each other or chat together. The social network has its own branding with a logo, a color scheme and the possibility to change between two color modi by a toggle bar. The logo within the tab bar adapts to the respective light/dark mode of the browser.
Check out the 👉 social network
The project was made at the SPICED Academy within my Full Stack Web Development Bootcamp (Nov. '21 to Feb. '22)
- single page application (SPA)
- client-site routing with react-router
- conditional rendering for error handling
- registration for new users with first name, last name, email and password
- password hashing with bcrypt protection; the input is displayed encrypted
- use of functional components and class components
- reset password flow
- login and logout for registered users
- profile component to show name and mail, add and edit a profile picture and bio
- incremental search to find people
- using hooks as react feature for functional components
- friendship button to send, accept and cancel a friend request or end the friendship again
- overview over all the personal friends and potential friends with the option to accept open requests or unfriend again
- community-wide chat room powered by socket.io
- delete the account and all related data from the data base
- toogle bar to change between two color modi
- individual branding with logo, icons and color scheme
- different cursor styles when hovering over an element
- using tailwindcss for styling
The user can switch between two color scheme which can be set by clicking on the toggle bar.
The first screen when you visit the start page of con.
Registration page to create a new account.
Login page for users who already have an existing account. Here you can also see the error handeling when something went wrong during the login process, e.g. if the user did not fill out the mandatory fields.
When people have forgotten their password they can reset it with a secured process in three steps.
Individual profile page where users can upload an image, edit their bio or delete the account.
With an incremental search users can search for friends or other people.
When a user does not exist a 404 page will appear.
The open meeting room can be used to chat with each other.
© 2022, Michèle Rietzl