Skip to content

A full-stack social media website that is for gamers who want to post and chat about games (Built with HTML 5, CSS3, React, Node, Typescript. PostgreSQL)

Notifications You must be signed in to change notification settings

Sam-Castaneda13/full-stack-project

Repository files navigation

full-stack-project

GamerPost is a dynamic social media platform designed exclusively for gamers, creating a space where they can connect, share, and engage with a vibrant community. Built using modern web technologies such as TypeScript, HTML, CSS, and a robust PostgreSQL backend, GamerPost combines a sleek, interactive interface with reliable, fast performance.

Technologies

{

  • Typescript
  • HTML5
  • CSS3
  • Postgresql
  • React

}

Key Features

Account Creation

Sign-Up Form: New users are presented with a sign-up form where they can create an account by entering a username, email address, and a secure password. To enhance security, GamerPost enforces strong password requirements.

Personalization: Once verified, new users can personalize their profiles with profile pictures.

Creating a Post with Text and a Picture

Post Creation Interface: Users can click on the "Create Post" button, which opens a dedicated interface for composing a new post. This interface includes fields for text input and options for uploading images.

Text Input: The text box allows users to write about their recent gaming experiences, thoughts, or any update they wish to share with their followers. Users can format text to highlight certain parts, adding emphasis to their message.

Image Upload: Below the text box, users find an image upload option that lets them add an image from the internet. Uploaded images are previewed immediately, allowing users to check their visual content before posting.

Liking a Post

Liking a Post: Beneath each post, there’s a heart icon that users can click to show they enjoyed or appreciated the content. Once clicked, the icon changes color to indicate that the post has been liked.

Like Count: Next to the thumbs-up icon, a counter displays the total number of likes the post has received. As users continue to like the post, the count automatically updates in real-time, giving the post creator feedback on how well their content resonates with others.

Disliking a Post

Disliking a Post: Alongside the thumbs-up icon, there’s a broken-heart icon that users can click to dislike a post if they don’t find it relevant or enjoyable. Like the like button, the thumbs-down icon changes color to indicate that a user has disliked the post.

Dislike Count: Similar to the like count, a counter next to the thumbs-down icon displays the total dislikes on the post. This allows both the community and the post creator to see if there’s any mixed feedback on their content.

Creating and Viewing Comments

Accessing the Comment Box: Below each post, there’s a comment icon and a text box that invites users to add their thoughts. By clicking on the comment box or the comment icon, users can start typing their response.

Viewing Other Users Comments: Users can see other comments made by other users who wanted to share their opionins about the post.

About

A full-stack social media website that is for gamers who want to post and chat about games (Built with HTML 5, CSS3, React, Node, Typescript. PostgreSQL)

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published