I developed the front-end of Bonwazadiler, a clone of the French marketplace "Le Bon Coin", using Next.js. This project allowed me to develop several essential skills for modern web development:
- Multi-provider authentication: Integration of different authentication methods (Google, Facebook) in addition to classic email/password authentication
- Complex forms: Creation of multi-step listing forms with different types of inputs (text, selection, image upload)
- Polished UI/UX: Using Tailwind CSS and ShadCN UI to create a modern and responsive user interface
- Global state: Managing application state with React tools
- Dynamic routing: Implementation of dynamic routes for navigation between listings and categories
The front-end communicates with a RESTful API to retrieve and send data, manage users and listings. I particularly enjoyed working on the listing layout and the user experience when creating a new listing.
For the back-end of Bonwazadiler, I chose Express.js as I was still learning Next.js and wanted to clearly separate responsibilities. Developing the back-end allowed me to explore:
- REST API architecture: Structuring endpoints for different resources (users, listings, categories)
- Custom middlewares: Development of middlewares for authentication, data validation, and error handling
- Security: Implementation of security measures to protect user data
- Upload management: Configuration of storage for listing images
- OAuth integration: Configuration of third-party authentication services
I particularly appreciated setting up the authentication system with multiple providers, which allowed me to gain an in-depth understanding of how JWT tokens and sessions work.
Main Features
This classified ads platform includes several essential features:
- Ad Publishing: Intuitive interface for creating and publishing listings with photos
- Categorization: Organization of listings by categories and subcategories
- Advanced Search: Multiple filters to refine searches (price, location, etc.)
- Favorites: Ability to save listings for later viewing
- Customizable Profile: Management of personal information and preferences
- Dashboard: Tracking of published listings and interactions
- Integrated Messaging: Direct communication between buyers and sellers
- History: Tracking of past activities and transactions
Security and Trust
- Multi-provider Authentication: Secure login via different methods
- Moderation: Reporting and verification system for listings
- User Ratings: Rating and review system to build trust
- Data Protection: Security measures for personal information
This project taught me a lot about full-stack development and allowed me to put my theoretical knowledge into practice in a real-world context. Managing complex forms on the front-end and securing routes on the back-end were the most interesting challenges to tackle.