DevTinder Frontend - UI Development 🚀
📌 Code Demonstration Links
🔗 Backend Repository: DevTinder Backend
🔗 Frontend Repository: DevTinder Frontend
📌 Overview
DevTinder is a MERN stack web application designed to help developers connect and collaborate, similar to Tinder but for the tech community.
This repository contains the frontend of DevTinder, built using React + Vite for fast development, optimized performance, and modular UI components. The project is styled with Tailwind CSS & Daisy UI, and React Router DOM is used for seamless navigation between pages.
Currently, the frontend is in the development phase, with foundational setup and UI components being implemented.
✅ Steps Completed
1️⃣ Configuring Vite + React
- Initialized the React project using Vite, which provides faster builds and optimized performance compared to Create React App.
- Verified that the project setup is correct for smooth development.
2️⃣ Code Cleanup & Initial Testing
- Removed unnecessary boilerplate code generated by Vite.
- Conducted a test run to confirm that the development server is working correctly.
3️⃣ Installing & Configuring Tailwind CSS (v3)
- Installed Tailwind CSS v3, a utility-first CSS framework for fast styling.
- Configured Tailwind by modifying the
tailwind.config.jsand linked it with the project's styles. - Successfully tested Tailwind classes to ensure proper integration.
4️⃣ Installing & Configuring Daisy UI
- Installed Daisy UI, a Tailwind-based component library, for pre-designed UI components.
- Configured Daisy UI within Tailwind settings to make components available globally.
- Tested Daisy UI components to verify proper rendering and styling.
5️⃣ Creating Navbar.jsx
- Designed a responsive navigation bar using Daisy UI components.
- Ensured the Navbar includes essential elements like logo, navigation links, and a mobile-friendly menu.
- Used React state where necessary for handling dropdowns or responsive behavior.
6️⃣ Installing & Testing React Router DOM
- Installed React Router DOM to manage client-side navigation.
- Created a basic routing structure, including routes for Home, Profile, and Feed.
- Tested navigation between pages to ensure seamless user experience.
7️⃣ Setting Up Browser Router & Nested Routes
- Implemented BrowserRouter for handling client-side routing.
- Structured Routes & Nested Routes inside a
Body.jsxcomponent. - Ensured proper parent-child route handling for pages within the application.
8️⃣ Implementing Outlet in Body.jsx
- Used
Outletfrom React Router to dynamically render child components inside theBodycomponent. - This ensures that different pages load properly within the layout while keeping the Navbar and Footer consistent.
9️⃣ Creating the Footer Component
- Added a Footer component to balance the layout at the bottom of the page.
- Styled the footer using Tailwind and Daisy UI for a consistent design.
🎯 Next Steps
- Authentication Pages: Develop Login & Signup pages for user authentication.
- Homepage & Feed UI: Start building the main Feed Page, where users can explore developer profiles.
- Improving UI & Responsiveness: Enhance layout, spacing, and responsiveness for mobile and desktop views.
- API Integration: Connect the frontend with the DevTinder Backend for authentication and user interactions.
🔥 Conclusion
The DevTinder Frontend setup is progressing well, with the foundational UI components and routing in place. The next phase will focus on user authentication, profile management, and interactive UI elements.
With Vite for speed, Tailwind for styling, Daisy UI for components, and React Router for navigation, the frontend is well-structured for scalability and performance. 🚀