Project Description:
BRDG is a social media platform specifically designed for junior developers, recent graduates, career changers, and school leavers. Our team of five at Dev Academy recognized that many new entrants to the tech industry find platforms like LinkedIn overwhelming. We created BRDG to provide a more supportive space for their transition into tech careers. Initially, we used Shrek's family as our users to develop and test the platform, helping us refine the user experience.
My task was to handle the frontend development along with two other teammates, ensuring a user-friendly and visually appealing interface. I closely collaborated with the backend team to ensure smooth integration.
I worked on the frontend development of the project using:
- Figma for initial designs
- TypeScript and React for building dynamic user interfaces.
- Tailwind CSS for efficient styling.
- Storybook to developing and testing each UI component and page separately, ensuring every part of our frontend met design standards and worked seamlessly within the app.
Key features I implemented:
- Landing Page: Created a landing page to introduce BRDG to new users, providing an initial impression and directing them to explore further.
- UI Development: Designed and implemented various UI components including:
- Search bar and text fields for easy navigation and interaction.
- Sections for displaying ads and upcoming events, initially hardcoded and designed for future interactivity.
- Detailed user experience and education sections within user profiles
- Authentication: Implemented user authentication, allowing access to post content, images, and the commenting system.
- Posting and Interaction: Enabled users to post images and texts to the feed.
- Commenting System: Integrated a full-stack commenting service that enables authenticated users to add, edit, delete, and reply to comments on posts.
- Light and Dark Mode: Added light and dark mode options for better readability and user preference.
By leveraging these technologies and methodologies, we successfully developed an MVP of BRDG within the week, featuring:
- Three Pages: Introduced a cohesive Landing Page, dynamic Main Page with robust navigation and search functions, and detailed Profile Page highlighting user interactions.
- Navigation and Search: Improved user navigation with a single menu across main and profile pages, making platform features easier to find and use.
- User Interaction:Integrated a feed for posts, enabling users to create multimedia content, interact through comments, and reactions.