Skip to content

01zulfi/quieter

Repository files navigation

quieter: social media for quiet folks

Visit the website

About the Project

A social media application where users can join communities, create posts and comment. Visit the about page of quieter to learn about quieter specific terms.

Technologies Used

Getting Started

  1. Clone the repository.
git clone [email protected]:01zulfi/quieter.git
  1. Make sure all the tests pass.
npm test
  1. Go to console.firebase.com and create a new project. Firebase will provide a configuration object. Replace it with the one in src/utils/firebase-config.ts.

    • Make sure to enable firebase firestore and authentication.
  2. Serve the app locally. It should be live at http://localhost:3000/.

npm start

Features

  • Users can login the app through email and google. There's also a sign in as guest option, though guest users can only view certain parts of the app. Guest users cannot interact with quieter i.e. they cannot post, comment, and like.
  • Users can create new communities; the user who creates a community will now be the admin. Admins can edit community details and delete the community at their discretion
  • Users can create posts. Posts are always linked to a community. The user who creates a post is referred to as the author. Authors can edit post details and delete the post at their discretion.
  • Users can create comments on posts. The user who creates a comment is referred to as the author. Authors can delete the comment at their discretion.
  • Users can like posts.
  • Users can join/leave communities. Joining a community is not mandatory for a user to create a post in it.
  • Users have a personalized feed at their homepage. It shows posts from their joined communities and from the communities they're admin at. It will also show posts that they have created.
  • Users can view their profile stats at their page. They can choose to hide their profile stats if they wish.
  • Users can select avatars from a predefined selection.
  • Users can switch between a light and a dark theme.

Attributions

  1. Image in Sign in Page from unsplash.
  2. "Rubik" font and icons from google.
  3. Avatar SVGs from svgrepo.com.
  4. Color palette for light and dark theme from nordtheme.

Sign in page (dark mode):

image

Homepage in light and dark mode:

image image

More Screenshots

Signed in user's profile page:

image

Avatar selection page:

image

About page:

image

Box (quieter's term for groups/communities) page:

image

String (quieter's term for posts/threads) page:

image

Another user's profile page with and without their privacy turned on:

image image