A social media platform featuring light and dark modes, responsive design, and real-time messaging. Users can create and edit posts, follow others, tag friends, add comments, send messages, and more.
All images via unsplash.
- TypeScript
- React
- Tailwind CSS
- shadcn/ui
- React Router
- Zustand
- Firebase
- Vite
☑ Home Page: View latest posts in your feed, and discover new users to follow.
☑ Create Post: Add an image, caption, location, and tagged users, all with form validation.
☑ Post Interactions: Like, save, comment on, share, and edit posts.
☑ Post Details Page: A detailed view of a post, also display related content.
☑ Profile Page: View a user's profile, including their posts, followers, and following.
☑ Live Messaging: Send and receive messages with Firebase realtime database subscriptions.
☑ Explore Page: View posts from users you don't follow yet.
☑ Firebase BaaS: Firebase authentication with Google OAuth, Firestore document database, realtime database, and file storage.
☑ Light and dark modes: Switch between light, dark, and system themes.
☑ Responsive design: A seamless experience on all devices.
Follow these steps to set up the project locally on your machine.
Clone/Download the Repository
git clone https://github.com/tmachnacki/sharebase.git
cd sharebaseInstallation
Install the project dependencies using npm:
npm installSet Up Environment Variables
Create a new file named .env.local in the root of your project and add the following content:
VITE_FIREBASE_API_KEY=
VITE_FIREBASE_AUTH_DOMAIN=
VITE_FIREBASE_PROJECT_ID=
VITE_FIREBASE_STORAGE_BUCKET=
VITE_FIREBASE_MESSAGING_SENDER_ID=
VITE_FIREBASE_APP_ID=Register an account with Firebase. Follow the docs to set up a web app with auth, firestore, storage, and realtime database. Replace the env variables with your credentials.
Running the Project
npm run devOpen http://localhost:3000 in your browser to view the project.