NivaldoFarias / linkr-frontend

17ᵗʰ Project developed during Driven's Full Stack Develpment Bootcamp

Home Page:https://linkr-fullstack.vercel.app/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Linkr Banner

Summary

Full Stack Development Project — Front end

Built With

vercel react react-router styled-components

Overview

The purpose of this Full Stack project was to create a simple, yet refined, web application to post and share links, using frameworks such as React, Nodejs and Postgresql.

To summarize, there are a few key components that made building this project a challenge:

  • The given prompt was split in two parts: in the first week, there were a set of requirements to be met, and in the second week, there were a set of features to be implemented upon the initial build. In both weeks, these requirements/features were presented as Sprints, which were achieved by using sprint planning tools such as Trello.
  • As a team, we had to research, plan out, and implement the features of the application from the ground up, both Back End and Front End. As a result, multiple team-work coordination skills were required, as well as the ability to communicate with the team and the client (in this case, the client is the user)
  • As a concept, the platform required a fully-featured, user-friendly interface, with a robust database and website enviroment. Hence, the project was refactored twice, to acommodate the new requirements.

Features

  • Main page
    • Timeline displaying the most recent posts from the users that the user is following.
    • Trending sidebar displaying the most engaged hashtags.
  • Posts
    • Each post has a sections for its number of likes, comments, shares.
    • Hashtags are highlighted and interactive.
    • Each of these sections is interactive, and can be expanded by clicking or hovering on the icon.
    • The post content is editable and deletable only by the user.
  • Comments
    • Comments are always displayed from the most recent to oldest.
    • A comment sent by the same user that created the post has a unique icon.
    • A comment sent by an user that the user is following has a unique icon.
  • Reshares
    • A reshared post is visible to users who do not follow the post's author.
    • Each share has a unique header, displaying the user that shared the post.
  • Hashtags
    • Aswell as interactive, the hashtags are constantly updated, taking into account both the number of posts and the number of likes on each of them.
    • Each hashtag has a unique page containing all posts with that hashtag.

Study Playlist & Contact

In this section I included all Youtube content I used or refered to while studying for this project, aswell as my main contact mediums. Keep in mind that most of these videos contain information that was not previously studied during class, which may affect some parts of the code that contain these extras.

Youtube shield Linkedin shield Slack shield

About

17ᵗʰ Project developed during Driven's Full Stack Develpment Bootcamp

https://linkr-fullstack.vercel.app/

License:MIT License


Languages

Language:JavaScript 99.0%Language:HTML 1.0%