Yappin' is a microblogging platform designed to provide a dynamic and interactive user experience. The project has evolved through multiple stages, incorporating new features based on user feedback and technical improvements. This document summarizes the key features and functionalities implemented in the project.
- Users can register and log in using either Google OAuth or a standard username-password system.
- Secure authentication is managed via
express-session. - Users can log out anytime, and their session data is cleared.
🔹 Google Login Page:
🔹 Standard Login Page:
🔹 Standard Login Page (After Successfully Registered):
🔹 Permission Request (Google OAuth):
🔹 Username Selection After Google Login:
- Users can create, edit, and delete posts.
- Posts support Markdown text, which is converted to HTML using the
markedlibrary. - Posts display usernames, avatars, timestamps, and formatted content.
📝 Creating a Post:
🛠️ Editing a Post:
- Users can like posts, with likes updating dynamically.
- Sorting options include sorting posts by likes or recency.
📌 Homepage (Not Logged In View):
📌 Homepage (Logged In View):
- Each user has a profile page displaying their posts and account details.
- Users can delete their accounts, removing all their posts.
👥 User Profile Page:
❌ Account Deletion Confirmation:
- The backend uses SQLite for persistent storage.
- The database contains two primary tables:
- Users Table: Stores username, hashed Google ID, avatar URL, and account creation date.
- Posts Table: Stores post content, associated username, timestamp, and like count.
- Google OAuth authentication implemented using
Passport.js. - Uses
.envfile to securely store API keys.
- Dynamic sorting of posts based on likes or recency.
- AJAX-powered like system for real-time updates.
- Emoji picker for inserting emojis into posts.
The project will continue to evolve with the following planned enhancements:
- 🖼️ Avatar Upload System: Allow users to upload custom profile pictures.
- 📌 Advanced Filtering & Sorting: More post filtering options.
- 🔔 Notification System: Alerts for likes, comments, and followers.
1️⃣ Clone the Repository
git clone https://github.com/your-repo/yappin.git
cd yappin2️⃣ Install Dependencies
npm install3️⃣ Setup Environment Variables
- Create a
.envfile and add:CLIENT_ID=your_google_oauth_client_id CLIENT_SECRET=your_google_oauth_secret
4️⃣ Initialize Database
node populatedb.js5️⃣ Run the Application
npm startThe application will be available at http://localhost:3000/.
For any questions or contributions, feel free to reach out! 🚀✨