Skip to content
The landing page for Latest Social Network, featuring a series of pictures of smiling people next to the main heading and the login and signup buttons

Latest Social Network project overview

A project to practice handling file uploads, user authentication, and styling with Tailwind.

Access

To avoid signing up, you may log in with the following credentials:

tester3@gmail.com // testtest

Features

  1. Secure login with Passport Auth

  2. Cache for external API calls to Unsplash

  3. Uploads to Cloudinary, with different sizes for post and profile pictures

  4. Light and dark mode toggle

  5. Prompts and mobile menu are contained in accessible modals

  6. Responsive for desktop & mobile

Landing Page (light mode)

A random set of images is fetched from Unsplash's API using the keywords 'happy friends'. Due to the limitations on the number of requests per hour, the landing page will cache the API response and only refresh after 10 minutes have passed.

The landing page for Latest Social Network, featuring a series of pictures of smiling people next to the main heading and the login and signup buttons.
Picture feed (smaller screen, dark mode)

Pictures are displayed anonymously, sorted by latest on top, and only the number of likes is displayed on the page feed. To see a post's creator and access comments, viewers must access the post itself.

A screenshot of the picture feed when visited on a smaller device with dark mode activated. It shows square thumbnails of pictures arranged into two columns, with each a white heart and the number of likes near the bottom margin.
Post (light mode)

The picture itself is the main attraction of a post's page, with a smaller caption below. The option to delete a post appears only to the creator, much like happens with comments.

Screenshot of a partial view of a post's page, containing the title, picture, caption, number of likes, a trashcan for a delete button, and rows of comments. The title reads 'A computer once beat me at chess', and the caption reads 'but it was no match for me at kickboxing'.
User profile (light mode)

Users are greeted by name, then offered options to update their profile. For simplicity's sake, as of now the options to add a new post and to view a user's own latest posts are included in this section.

Screenshot of a user profile's dashboard. On top there is a small round profile picture, then a navbar with the options 'add post', 'profile', 'feed' and 'logout'. On the top right there is a small toggle for light and dark modes. Then the user is greeted by name and offered to change profile picture, change name or e-mail, or add a post. The user's latest posts are listed at the bottom.

Roadmap

or: what I would like to implement given more time

  • Add more authentication methods

  • Enable password change and recovery

  • Add public and private posts

  • Add share option

  • Add tests

Lessons learned

  • When possible, the use of semantic HTML5 rather than customized solutions, i.e. Details rather than a fully custom accordion, can solve a lot of accessibility issues.

  • Thorough planning and design must be done before implementing changes or new features. An example: when a Comment model is created with Mongoose without a reference to the poster's profile picture, for instance, even when that is added to future versions it still means previous comments will not have a picture attached automatically to them.

  • Tailwind is a tool that makes implementing designs a lot faster, even if the HTML ends up looking very polluted with classes. Customizing colors and themes is fun!

Back to list of projects
Back to top