Build YourSelf is an intuitive web application designed to simplify the registration and application process for students and teachers in training centers. Our goal is to enhance the digital experience while fostering educational growth. The application is developed using Tailwind and Bootstrap for the front-end, and Laravel for the back-end. These cutting-edge technologies enable us to create a modern and responsive user interface, while ensuring robust and secure business logic.
Working on this project allowed us to master these technologies, reinforcing our understanding of the courses we are taking. By putting our learning into practice, we better understand the real-world challenges of web development and can find innovative solutions.
Ultimately, Build YourSelf is not just a project, but a learning journey that prepares us to become competent and confident web developers. We are eager to see how our work will improve the educational experience for everyone who uses our application.
During the design phase of Build YourSelf, we focused on data modeling. We used a Logical Data Model (LDM) to represent our database structure in a logical and organized manner. The LDM allowed us to define the entities of our application, such as students and teachers, and the relationships between them. This facilitated the understanding of data flows and ensured that our application meets user needs effectively and accurately.
Our journey with Build YourSelf started with previous experience on a desktop application developed with PyQt5 for training centers. This experience helped us understand the challenges and needs of training centers and inspired us to create a more user-centered solution.
We decided to develop Build YourSelf, a web application that offers a more accessible platform to users and utilizes the power of modern web technologies to create a robust and intuitive solution. In the second phase of our project, we used HTML, JS, and CSS for the front-end, and Express.js for the back-end. This phase was part of our software engineering training at ALX SE, allowing us to strengthen our web development skills and apply the concepts we learned during our training and coursework.
In the current phase of the project, we are exploring and integrating new technologies, including Laravel for the back-end, and Tailwind CSS and Bootstrap for the front-end. These technologies enable us to create a more robust and intuitive web application, while enhancing our web development skills and discovering new technologies.
- HTML: Standard markup language for creating web pages, providing the structure of our application.
- JavaScript (JS): Used selectively in the front-end development to make our web application interactive and dynamic.
- Tailwind CSS: Chosen for its flexibility and utility-first approach to styling, allowing us to create custom designs without leaving our HTML.
- Bootstrap: Utilized for its reusable components and responsive grid system, accelerating the development process and ensuring design consistency across different platforms and screen sizes.
- Laravel: A robust PHP framework following the Model-View-Controller (MVC) pattern. Laravel provides a clear structure for our code and facilitates complex tasks such as authentication, session management, and routing.
- Model-View-Controller (MVC): A design pattern that separates an application into three main components: Model (business logic), View (presents data to the user), and Controller (handles user interactions and updates the Model and View accordingly). This separation of concerns makes our code more organized, easier to understand, and maintain.
A well-structured and intuitive web interface is essential for providing a good user experience. Our landing page includes several sections for easy navigation:
-
Header:
- Home: Redirects to the site's homepage.
- Registration: Leads to a page where users can register for an account as a student or teacher after logging in.
- About: Redirects to a page containing information about the site and its mission.
- Contact Us: Leads to a contact page with a form for users to send messages and contact details.
- Login: Redirects to a login page for existing users to enter their credentials and access their account.
-
Hero and Main Sections:
- Hero: Contains brief information about the site.
- Main: Contains site offers and benefits.
-
About Us: Provides information about the site.
-
Footer: Combines all site elements and includes copyright information.
The login page is a crucial element of any website or web application, serving as a gateway for users to access protected content and features. It typically includes fields for users to enter their credentials.
A registration page guides users through the process of creating a new account on a website or application. This page is essential for allowing users to access specific services or content without having to log in immediately. We verify the email validation using EmailJS.
Our contact form includes fields for the user's email address and a text area for their message, along with a 'Send' button. There's an option to close the form in the upper right corner.
We use EmailJS, a JavaScript-based email sending service, to send verification emails. When a user registers or performs an action requiring verification, our site generates a unique verification code. This code is sent to the user via an automated email managed by EmailJS. The user receives the email and enters the verification code on our site to confirm their action, adding an extra layer of security and authenticity.
Collaboration was a key aspect of this project. We used GitHub as a platform for our teamwork, allowing us to share code efficiently, track changes, and resolve issues together. We divided the work while maintaining an overview of the project through the use of branches and pull requests. This experience not only helped us learn to work as a team but also understand the importance of communication and coordination in software development. Working together on this project allowed us to combine our skills and knowledge to create this application.
GitHub Repository: Build YourSelf
We would like to express our deep gratitude to Monsieur ELBANNAY for this valuable opportunity. Through this project, we not only deepened our understanding of web technologies but also gained valuable practical experience. Developing Build YourSelf has been a rewarding learning journey that allowed us to apply our theoretical knowledge and discover new technologies. We look forward to continuing to explore and learn in this exciting field.
- Youness Boumlik
- Abdellah Boulidam