Skip to content

A social media app built with angular and firebase

Notifications You must be signed in to change notification settings

Gururajj77/brevipost

Repository files navigation

Hi, this is Gururaj's social media app, called Brevipost

This app is built using the latest Angular 17 and the firebase. Below are the features used from the firestore:

  • Authorization
  • Firestore

The link for the hosted application: https://bervipost.firebaseapp.com

Please create a new account either by entering the needed credentials or by Google.

Now, here is the breakdown of the application design and the decisions made by me.

Before going in:

  • I haven't implemented the UI of sign-in and register exactly as the "tweetx web"(the svg from the image is missing).
  • Put efforts to make the other parts of the app similar to the image references.
  • If you need a test credentials, you can use:

The folder structure of the application:

  • app: contains the main components of the application.
  • assets: contain the font used (Poppins).
  • environment: contains the firebase configuration credentials.
  • partials: The contains the scss partial styles which contains the accent and button styling which are shared across the application.

The app folder is the main folder housing all the application components, lets dive in:

  • feed: The entry point to the app after successful login, will see all the posts made by the users of the app.
  • profile: Holds the profile component of the logged in user, has 3 sub components called "profile-posts", "followers", "following" to show the posts from the follwed users, the logged in user's followers and following accounts respectively.
  • sign-in and sign-up: Has similar functionality, the sign in with google implemented for both.
  • users: Holds the users component, which displays all the registered users with their followers count.
  • routes: The routes are registered in the app.routes.ts as per the angular 17 standard, where the standalone component architecture is default instead of ngModule (app-routing.module.ts).
  • shared: This folder holds the shared components and services which will be detailed elaborately below.

The shared folder holds the shared components and important services that enable this app to communicate to the firebase.

  • components: has the loader, main header, snackbar, the posts card and the user card components which are shared across the application.
  • services:
    • The auth service has the methods for signin with google, to authenticate the user has logged in or not and to retrieve the current user details.
    • firestore: the firestore has 2 services which has mainly related to posts, getting users and updated the follow counts. The second service was created later in development to increase maintainability of the application.
    • guard: this has a simple authorization guard for the routes to check the user has logged in to access the feed, users and profile pages.
  • types : golds the post and user types for the application.

About

A social media app built with angular and firebase

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published