Project Showcase: TabarBaptiste's Portfolio Highlights
This page is dedicated to showcasing my diverse range of projects, each reflecting my skills and passion for development. For each project, you'll find a brief overview, key features, technical details, and the technologies I utilized. I've also included a button for each project that will take you to a dedicated page with more in-depth information.
DAO Generator
My initial focus is on the DAO Generator, a custom extension I developed during my apprenticeship at the Conseil Départemental du Val-de-Marne. The core objective of this project was to streamline the creation of Data Access Objects (DAOs) by automating their generation from databases. DAOs play a crucial role in modern software architecture by providing a clean and consistent interface for interacting with various database management systems (DBMS). This abstraction layer enhances code maintainability, reduces database vendor lock-in, and improves overall application security. Understanding the critical need for efficient data access in enterprise applications, I embarked on creating a solution that would significantly reduce the manual effort involved in DAO creation.
The DAO Generator addresses a common challenge faced by developers: the repetitive task of writing boilerplate code for data access. By automating this process, developers can focus on higher-level application logic and business requirements, leading to faster development cycles and increased productivity. The extension integrates seamlessly with existing development workflows, allowing developers to easily generate DAOs for their specific database schemas. This project demonstrates my ability to identify a real-world problem, design a practical solution, and implement it using modern software development practices. The user-friendly interface and automated generation capabilities make the DAO Generator a valuable tool for any development team working with databases. Furthermore, the project showcases my proficiency in TypeScript, a language known for its strong typing and excellent tooling, which contribute to the robustness and maintainability of the extension. The use of GitHub Actions for CI/CD ensures that the project adheres to high-quality standards, with automated checks for code quality and linting. Sentry integration provides real-time error tracking, allowing for proactive issue resolution and ensuring a smooth user experience. Overall, the DAO Generator project exemplifies my commitment to creating efficient, reliable, and user-friendly software solutions.
Key Features:
The DAO Generator boasts a range of features designed to simplify and accelerate DAO creation. At its heart, the extension allows users to effortlessly add database servers, providing a centralized interface for managing multiple database connections. This feature streamlines the process of working with diverse data sources, eliminating the need to switch between different database management tools. The intuitive sidebar integration allows developers to explore their databases and tables directly within the development environment, providing a clear and organized view of the database schema. This visual representation of the database structure simplifies the selection of tables for DAO generation, reducing the risk of errors and ensuring that the correct data access objects are created.
The core functionality of the DAO Generator lies in its ability to automatically generate DAO files for selected tables. This feature drastically reduces the manual effort required to create DAOs, saving developers valuable time and resources. The extension offers two distinct generation modes: "Save" and "Overwrite." The "Save" mode provides a safety net by creating a backup of existing DAO files in the backup/ directory before overwriting them. This ensures that developers can easily revert to previous versions if necessary, mitigating the risk of data loss or accidental changes. The "Overwrite" mode, on the other hand, directly replaces existing files, offering a streamlined approach for rapid development cycles. The choice between these modes provides flexibility and control, allowing developers to tailor the generation process to their specific needs and risk tolerance. The combination of these features makes the DAO Generator a powerful tool for database-driven application development, significantly improving developer productivity and code quality.
Technical Details:
The technical foundation of the DAO Generator is built upon a robust and modern technology stack. The extension was meticulously developed using TypeScript, a superset of JavaScript that adds static typing to the language. This choice of language significantly enhances code maintainability, reduces the likelihood of runtime errors, and improves the overall quality of the project. TypeScript's strong typing system allows for early detection of potential issues, making it easier to refactor and extend the codebase in the future. The workflow for the project is meticulously orchestrated using GitHub Actions, a powerful CI/CD (Continuous Integration/Continuous Deployment) platform. GitHub Actions automates various aspects of the development process, from code quality checks to deployment procedures. Specifically, the .workflow/ directory contains the configuration files that define the automated workflows, ensuring that every code change undergoes rigorous testing and validation.
One of the key workflows is the "Release" workflow, which automates the process of updating the extension's version and publishing it. This workflow is triggered manually via workflow_dispatch, providing fine-grained control over the release process. The "PR Checks" workflow plays a crucial role in maintaining code quality by implementing code quality checks and pr-lint analysis. These checks ensure that the code adheres to established coding standards and best practices before a pull request is merged. To ensure a seamless user experience, the DAO Generator is integrated with Sentry, a powerful error tracking and monitoring platform. Sentry allows me to capture and analyze user errors in real-time, enabling me to quickly identify and resolve issues before they impact users. This proactive approach to error handling ensures that the extension remains stable and reliable, providing a positive experience for developers. The combination of these technical elements underscores my commitment to building high-quality, maintainable, and user-friendly software.
Recettes (Recipes)
My next project is Recettes, a personal application I created to manage my own collection of recipes. This application allows me to perform all the essential CRUD (Create, Read, Update, Delete) operations on my recipes, providing a centralized and organized way to store and access my culinary creations. The application is secured with a four-digit login code, ensuring that my personal recipes remain private and accessible only to me. This project highlights my ability to design and implement a full-stack application, combining both frontend and backend technologies to create a functional and user-friendly solution. The Recettes application demonstrates my understanding of software architecture principles, database management, and web service integration.
Frontend:
The frontend of Recettes is built using a combination of cutting-edge technologies designed to provide a responsive and engaging user experience. I chose Angular as the primary framework for its Model-View-Controller (MVC) architecture, which promotes a clean and organized codebase. Angular's component-based approach allows for modular development, making it easier to maintain and extend the application over time. The MVC architecture simplifies the separation of concerns, ensuring that the frontend logic, presentation, and data handling are well-defined and independent. This structure enhances code readability and facilitates collaboration among developers.
For the visual styling of the application, I leveraged the power of Tailwind CSS, a utility-first CSS framework that allows for rapid and customizable design. Tailwind CSS provides a set of pre-defined CSS classes that can be combined to create complex layouts and user interfaces with minimal custom CSS. This approach significantly speeds up the styling process, allowing me to focus on the overall user experience rather than writing verbose CSS code. I particularly appreciate how Tailwind CSS simplifies customization, enabling me to tailor the application's appearance to my specific preferences and branding. The combination of Angular and Tailwind CSS provides a robust and efficient platform for building modern web applications with a focus on user experience and maintainability. The Recettes frontend showcases my proficiency in these technologies and my ability to create visually appealing and functionally rich interfaces.
Backend:
The backend of Recettes is powered by Express, a minimalist and flexible Node.js web application framework. Express is a popular choice for building RESTful APIs due to its simplicity, performance, and extensive middleware ecosystem. I chose Express because [Express's Advantages]: its unopinionated nature allows me to tailor the backend architecture to the specific needs of the application. Express's lightweight footprint ensures that the backend remains performant even under heavy load, providing a smooth and responsive experience for users. The RESTful API design allows for seamless communication between the frontend and backend, ensuring that data is transferred efficiently and securely.
The backend handles all the essential CRUD operations for the recipe data, including creating new recipes, retrieving existing recipes, updating recipe details, and deleting recipes. The API endpoints are designed to be intuitive and easy to use, providing a clear and consistent interface for the frontend to interact with. Express's middleware support allows me to add additional functionality to the backend, such as authentication, authorization, and logging, without cluttering the core application logic. The Recettes backend demonstrates my understanding of RESTful API design principles and my ability to build scalable and maintainable server-side applications using Express.
ORM (Object-Relational Mapping):
To simplify database interactions, I utilized Prisma as the ORM (Object-Relational Mapping) for the Recettes application. Prisma is a modern ORM that provides a type-safe and intuitive way to interact with databases. It eliminates the need to write raw SQL queries, reducing the risk of SQL injection vulnerabilities and improving developer productivity. Prisma's schema definition language allows me to define the database schema in a declarative way, making it easy to understand and maintain. The ORM generates type-safe database clients that can be used in the application code, ensuring that data access is both efficient and secure.
Prisma's migration system allows for seamless database schema updates, making it easy to evolve the application over time. The ORM's support for various databases, including PostgreSQL, MySQL, and SQLite, provides flexibility and ensures that the application can be deployed on different database platforms. Prisma's intuitive API and comprehensive documentation make it a pleasure to work with, significantly simplifying database management tasks. In the context of Recettes, Prisma streamlines the process of creating and managing the database structure, allowing me to focus on the application's core functionality. The use of Prisma demonstrates my commitment to using modern tools and technologies to build robust and maintainable applications.
Database:
For the Recettes application, I chose NeonDB as the database solution due to its simplicity of use and seamless integration with the other technologies in the stack. NeonDB is a fully managed PostgreSQL database service that offers a generous free tier, making it an ideal choice for personal projects. Its ease of use and integration capabilities significantly reduced the setup time and allowed me to focus on developing the application logic. The 0.5GB of storage provided by the free tier is sufficient for my personal use case, allowing me to store a substantial number of recipes and related data. NeonDB's compatibility with PostgreSQL, a robust and widely used open-source relational database, ensures that the application can scale as my data needs grow.
One of the key benefits of using Prisma as the ORM is that it simplifies the process of switching to a different database if needed. If I were to exceed the storage limit of NeonDB, I could easily migrate to another PostgreSQL database or even a different database system supported by Prisma, such as MySQL or SQLite. This flexibility ensures that the application remains adaptable to changing requirements and data volumes. NeonDB's ease of use and integration, combined with Prisma's database abstraction capabilities, make it a solid foundation for the Recettes application. The choice of NeonDB demonstrates my ability to select the right tools for the job, balancing performance, scalability, and ease of use.
Web Services:
To host the backend of Recettes, I opted for Render as the web service provider. Render is a cloud platform that simplifies the deployment and management of web applications and APIs. I connected NeonDB to Render [Render as a Web Service], leveraging Render's ability to seamlessly integrate with various database services. Render's intuitive interface and automated deployment capabilities made it easy to get the backend up and running quickly. The platform's scalability and reliability ensure that the application remains available and performant even under increased traffic. Render's free tier provides a cost-effective solution for hosting personal projects, allowing me to deploy and maintain the backend without incurring significant expenses.
Render's integration with GitHub allows for continuous deployment, meaning that any changes I push to the code repository are automatically deployed to the platform. This streamlined workflow significantly reduces the effort required to update the application and ensures that the latest version is always available to users. Render's comprehensive monitoring and logging tools provide valuable insights into the application's performance, allowing me to identify and address any issues proactively. The choice of Render as the web service provider reflects my commitment to using modern cloud platforms to simplify deployment and management tasks, ensuring that the application is reliable, scalable, and cost-effective.
Deployment:
For the deployment of Recettes, I utilized Netlify for the frontend and Render for the backend, both of which are excellent choices for modern web applications. Netlify is a platform that specializes in hosting static websites and single-page applications, providing a seamless and efficient deployment experience for the frontend. Its global content delivery network (CDN) ensures that the application is served quickly and reliably to users around the world. Netlify's free tier offers a generous set of features, making it an ideal choice for personal projects and small-scale applications.
Render, as mentioned earlier, handles the deployment of the backend API. Both Netlify and Render offer free, user-friendly solutions that are easily accessible, which was a key factor in my decision-making process. Their simplicity allows me to focus on development rather than complex deployment configurations. The continuous deployment capabilities of both platforms mean that updates to the frontend and backend are automatically deployed whenever changes are pushed to the code repositories. This streamlined workflow ensures that the application is always up-to-date and reflects the latest changes. The choice of Netlify and Render demonstrates my commitment to using modern deployment platforms that simplify the process and ensure a reliable and scalable application. The combination of these platforms provides a comprehensive solution for deploying and hosting full-stack web applications.
La Pyramide
La Pyramide is a web platform I developed during my BTS (Brevet de Technicien Supérieur) internship to centralize activities in the Lavalle neighborhood. This project serves as a comprehensive solution for event management, automated newsletter distribution, participant management, and provides a complete administrator interface. La Pyramide demonstrates my ability to design and implement a complex web application from the ground up, integrating various features to address a specific community need. This project showcases my understanding of frontend and backend development principles, database management, and user interface design.
Frontend:
The frontend of La Pyramide was built using fundamental web technologies: HTML, CSS, and JavaScript. These technologies provide the foundation for creating a user-friendly and interactive interface. HTML structures the content of the web pages, CSS styles the visual presentation, and JavaScript adds dynamic behavior and interactivity. While these technologies are foundational, they require a solid understanding of web development principles to create a cohesive and functional user experience. The use of these core technologies demonstrates my ability to work with the building blocks of the web and create a functional and accessible interface for users.
Backend:
The backend of La Pyramide is built using PHP and SQL, two widely used technologies for server-side web development. PHP handles the application logic, processing user requests, and interacting with the database. SQL is used to query and manipulate the data stored in the database. This combination of technologies provides a robust and efficient platform for building dynamic web applications. PHP's extensive ecosystem and SQL's powerful data management capabilities make them well-suited for handling the complex requirements of La Pyramide. The choice of PHP and SQL demonstrates my proficiency in server-side development and database management, essential skills for building web applications.
For database management, I utilized PHPMyAdmin, a web-based interface for managing MySQL databases. The database environment was set up using WampServer, a Windows-based web development environment that includes Apache, MySQL, and PHP. WampServer provides a convenient way to set up a local development environment for building PHP applications. PHPMyAdmin simplifies database administration tasks, such as creating tables, querying data, and managing user permissions. The use of these tools demonstrates my familiarity with database management practices and my ability to set up a complete development environment for web applications. La Pyramide is a testament to my ability to create practical and community-focused web solutions.
Assets
To visually represent the project, the following images are available:
rjweb-preview.png- Main preview imagerjweb-utilisateur.png- User/homepagerjweb-connexion.png- Login pagerjweb-contact.png- Contact pagerjweb-inscription.png- Registration formrjweb-inscrit.png- List of registered usersrjweb-profil.png- Profile pagerjweb-about.png- About page
In conclusion, this project showcase highlights my diverse skills and experiences in software development, from frontend technologies like Angular and Tailwind CSS to backend technologies like Express and PHP, and database management with Prisma and NeonDB. Each project reflects my commitment to creating efficient, user-friendly, and scalable solutions.
For more information about web development best practices, you can visit the Mozilla Developer Network.
