A simple social media template website originally built to be a distraction-free social forum where users could chat about emotions, get advice, and connect with others. Built using Next.js, React, TypeScript, Tailwind, Firebase Authentication and Firebase Firestore.
First, run the development server:
pnpm run devor
npm run devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx or the respective page.tsx files in the associated page subdirectories. The page auto-updates as you edit the file.
Within the src/ directory there are subdirectories associated with each page of the website i.e. feed/, login/, profile/. Within each subdirectory is a page.tsx that can be edited to modify the look and feel of each page.
When setting up Firebase to work correctly with this web application, ensure that the lib/ directory contains the file firebase.ts. This file may need to be updated with the firebase keys associated with your project. The file also contains additional information regarding setting a global rememberMe persistence and exporting the global auth.
- First the Client actiavtes the global auth context by making a sign-in request to the Firebase Authentication server. If sign-in is successful the auth context is correctly populated, else a sign-in error is displayed.
- Using the global auth context, individual page actions can access data from the Firebase cloud firestores. This includes getting information such as user-info, posts, comments, etc..