class: center, middle # SpeakUp ### An Anonymous Social Media Application for Confessions --- # Contents 1. Introduction 2. Objectives 3. Development Methodology 4. Requirement analysis 5. System Modeling 6. System Architecture 7. Tools Used 8. Algorithms Used 9. Conclusion && Future Recommendation --- # Introduction - Growth of social media - Issues with judgment and identity on traditional platforms - SpeakUp allows anonymous sharing of thoughts, experiences - Fosters supportive community without revealing identities - Implemented features like posts, comments, recommendations --- # Objectives - Anonymous platform for sharing thoughts - Algorithm for trending content - Ensure user privacy and security - Easy to use interface --- # Development Methodology - Agile development <img src="./images/agile.jpg" alt="agile" width="550" /> --- # Requirement Analysis ## Functional - User registration - Authentication - Confession creation - Commenting <img src="./images/functionalRqeuirements.png" alt="functional requirements" width="800" /> --- # Requirement Analysis ## Functional - Moderation - Performance - Usability <img src="./images/nonFunctionalRequirements.png" alt="non functional requirements" width="650" /> --- # Requirement Analysis ## Non-functional - Security - Performance - Usability --- # System Modeling - Use case diagram <img src="./images/useCase.png" alt="user case diagram" width="550" /> --- # System Modeling - ERD diagram <img src="./images/er.png" alt="er diagram" height="450" /> --- # System Modeling - Data flow diagram <img src="./images/dfd.png" alt="er diagram" height="450" /> --- # System Architecture - React frontend <img src="./images/frontend.png" alt="frontend design" width="800" /> --- # System Architecture - Node.js and Express backend - MySQL database <img src="./images/backend.png" alt="backend design" height="400" /> --- # System Architecture - Security measures like JWT <img src="./images/jwt.png" alt="jwt flow" height="450" /> --- # Tools Used ### Frontend - React - Axios - Tailwind CSS - Chart.js - Vite - Yup/Formik - React Markdown - React icons - React router dom, etc. --- # Tools Used ### Backend - Node.js - Express - Sequelize - jsonwebtoken - bcrypt.js - cors - md5 - mysql2 - nodemailer,etc --- # Tools Used ### Database - MySQL ### Dev Tools - Git/Github - VS Code - Postman - Figma - Draw.io - Linux - Docker etc. --- # Algorithms Used - Trending Confessions - Responsible for selecting and displaying the top trending confessions within the a month <img src="./images/trendingAlgo.png" alt="trending confessions algorithms" height="400" /> --- # Algorithms Used - Comment Milestones - Responsible to calculate and generate a notification for a user when a specific milestone is reached for comments on their confession. ```javascript const commentMileStone = (numOfComments, confessionTitle) => { const milestones = [1, 10, 50, 100, 1000, 10000, 100000, 1000000 ]; const milestone = milestones.find(ms => numOfComments === ms); const k = 1000; const m = 1000000; const b = 1000000000; if (milestone >= b) { return `Your confession "${ confessionTitle }" has reached ${ numOfComments / b }b comments`; } if (milestone >= m) { return `Your confession "${ confessionTitle }" has reached ${ numOfComments / m }m comments`; } if (milestone >= k) { return `Your confession "${ confessionTitle }" has reached ${ numOfComments / k }k comments`; } if (milestone) { return `Your confession "${ confessionTitle }" has reached ${ milestone } comments`; } return null; }; export { commentMileStone }; ``` --- # Algorithms Used - Time Ago Labeler - Responsible to convert a date string into a more user-friendly format, such as "1 hour ago" or "2 weeks ago". ```javascript export const dateConverter = dateString => { const timeAgo = Date.parse(dateString) / 1000; const currentTime = Math.floor(Date.now() / 1000); const timeDifference = currentTime - timeAgo; const timeIntervals = [ { interval: 1, label: 'second' }, { interval: 60, label: 'minute' }, { interval: 3600, label: 'hour' }, { interval: 86400, label: 'day' }, { interval: 604800, label: 'week' }, { interval: 2629440, label: 'month' }, { interval: 31553280, label: 'year' } ]; for (let i = timeIntervals.length - 1; i >= 0; i--) { const { interval, label } = timeIntervals[i]; const count = Math.round(timeDifference / interval); if (count >= 1) { if (count === 1) { return `one ${ label } ago`; } else { return `${ count } ${ label }s ago`; } } } return 'Just Now'; }; ``` --- # Conclusions ## Conclusion - Achieved goal of anonymous platform - Valuable hands-on learning experience - Foundation for future enhancements ## Future Recommendations - API call optimization with caching ( **React Query** ✅ ) - Machine learning for moderation - Multimedia support - Chat capabilities --- class: center, middle # Thank You 🙏