SYNEXTA-app 💡

About this project 🤔

This Symfony project is part of a technical test. The goal is to develop a web application with two main parts. In the first part, users can create an account, providing their name, email (unique), and a 12-character password. Upon registration, a unique account validation link is sent to the user's email. Users can log in, log out, and edit their name and surname after logging in.

In the second part, there is a shared database table containing a minimum of 10 products and 3 product categories ( i generated the data using fixtures and faker bundle). When logged in, users can add individual products to their personal list, add entire product categories to the list, remove products from their list, save their product choices and filter the products based on their categories. These choices persist across sessions. Products can be associated with multiple users, and each user has their personalized product list. 🥳

It uses the monorepo strategy ✅:

1- ⚡ /templates: The frontend templates that will be exposed to the users.
2- ⚡ /src: The backend part where all the functionnalities' logic goes.
3- ⚡ /README FILE imgs: This folder contains the DB SQL dump file and the images for this fantastic README file. 🥳
3- ⚡ /docker-compose.yml: The fake mailer server config on docker.

Built With 🛠️

  • php 8, PHP 8 is a major version of the PHP programming language. It was released in November 2020 and introduced several new features and improvements over its predecessor, PHP 7.
  • Symfony 5.4, a high-performance PHP web application framework that enables rapid development of robust and maintainable web applications.
  • My SQL, an open-source relational database management system used for storing and managing structured data.

Testing and developing Tool 👀

  • Postman, an API development and testing tool that simplifies the process of sending HTTP requests, managing APIs, and analyzing responses.
  • XAMPP, a free and open-source software package that provides a local server environment for web development, including tools like Apache, MySQL, PHP, and more.

( Go to the 🔝)

Getting Started 🎉

In order to run this project and extend its functionalities you need to follow a few steps :

Prerequisites 🧷

  • Make sure that Docker is installed on your operation system.
  • Make sure that Symfony CLI is installed on your operating system.
  • Make sure that XAMPP is installed and running on your operating system.

Installation 🔧

  1. Clone the repo
    git clone https://github.com/oumaima-kboubi/synexta-app.git
If you want to build on top of the project
  1. Install composer packages
    composer install
  2. Add an .env file for required projects
    #DB connection string
    DATABASE_URL="MySQL connection string" 
    ...
  3. Run the symfony server in the background:
    symfony console server:start -d
  4. Run the docker container:
     docker-composer up
  5. Open the web mail interface from the fake email server running in docker:
     symfony open:local:webmail
  6. Ensure that all ports are well set and enjoy!

( Go to the 🔝)

The app live demo ♾️

The App frontend Overview💻

Part 1

  • Sign in page

image

  • Register page

image

Once the account is created, a verification email is sent to the user in order to be able to access his personal space for extra security mesures.

image

This is the received email:

image

After clicking on the email link, the user will be redirected to his personal space.

image

The user is always able to change his password in case he forgets it by clicking on the Forgot password? button.

image

After filling the form with the right email, the user will receive an email to change his password account.

image

image

After clicking on the email link the user will be able to change his password immediatly and access his personal account.

image

  • Edit user info page

image

( Go to the 🔝)

Part 2

  • Home page

image

  • Products list page

image

  • Personal list page

If the user's personal list is empty:

image

If the user's personal list is full:

image

  • The user can do a list of actions:

    • Add a product to his personal list:

    image

    • Add a category to his personal list:

    image

    • Remove a product from his personal list:

    image

    • Filter the products based on the categories:

    image

    • Logout.

( Go to the 🔝)

Contact 📞

📧 Oumaima Kboubi - Kaboubioumaima@outlook.fr