Php Fullstack App

A full stack php application that manages user authentication, registration, login and even password forgotten.

Technologies/tools/languages used :

Table of contents

Overview

This project is initially an exercise to practice Php, Ajax, Tailwindcss, Typescript and sass in a real life application like. It has 3 major pages:

Login page 🔑
Register page 👤
Home page 🏠

As database, for the registration, login, and other utilities, I used PostgreSQL. On the home page, I added my main projects I built when I was learning JavaScript :

Space Calculator 🚀
Comprehensive Weather app ⚡🌞🌪
Full snake Game 🐍
Tic tac Toe ⭕❌
Shifumi game ✌🖐👊
Images slider 🖼
Dynamic Stopwatch ⏱
New York Simple Clock ⌚
Classic To do List 📋

Because I used tailwindcss CLI, I put SASS in the project for a more pragmatically way to write CSS (especially mixins)

Login Page

A fully responsive login page with a purple design.

Login Page : Features

This page have two many fields :
- Username
- password (has hide/show password)
A forgot (link to the forgotten password section) password link that lead to another page to reset the password
A link to send the user to the register page if he is not registered yet

Register Page

As the login page, it is also responsive and will adapt depending of your screen.

Register Page : Features

Here, three fields:
- Email address
- Username
- Password (at least 8 characters) and also hide/show 👁 option
A link to the login page if the user has already signed in

Home Page

Responsive (naturally). The purple design is kept.

Home Page : Features

A navbar that will change depending of the screen you have.It has 5 tabs :
- Home 🏠
- Profile 👤
- Tools ⚙
- About
- Log out

On big screens (width >= 640px), it will be a normal navbar horizontal.

On small screens, it is a menu burger that displays a vertical navbar.

The main title has an animation of cursor typing. It loops infinitely

A bouncing button that leads to the project grid
Project grids : all my JS projects are displayed as a grid of card.

A logout button. It opens a dialog that ask the user to confirm the logout
A "back to top" button able to scale depending of the user's screen width.

Profile Tab

This tab is quite special, it will open a dialog that make a brief recap of the user current stats. Here are the stats shown :

Username
Number of visits : this counter will increment each time you visit the main page
Best Score at snake game
Best Score at Rock-Paper-Scissors game (shifumi)
And also the date

Log out Tab

It behaves exactly like the logout button at the bottom of the page

Space Calculator 🚀

A calculator with a good-looking design that performs basic operations : addition, substraction, multiplication, division

As a personal touch, I added a clock on the top of the calculator (the clock).

If you click on it, it will change and display the date in DD/MM/YYYY format. Click an another time to go back to default state.

Comprehensive Weather app ⚡🌞🌪

A readaptation of my weather app project on github(link). Enter the name of the city and GO ! A simple design with animated icons to add some style. List of all parameters rendered when you query a city :

Location (city, town, ...) & Country
Temperature in Celsius degrees
Feels Like also in Celsius degrees
Humidity
Wind Direction
Speed Direction
Description (clear sky, rainy, foggy, ...)
The date and time at the place queried

Full snake Game 🐍

A complete snake game with many features. You can choose one between three levels of difficulty : easy, normal and hard

Here, audios are integrated. Different sounds will play (start, movement, eating, lose). If you lose, an another dialog will open

And ask you if you want to replay. Your best score will be registered, store in the database and shown, as I mentioned before, in your profile dialog. It is not responsive, so you need a screen at least 600 px large.

Tic tac Toe ⭕❌

Tic tac toe game, but with swipe SFX. Play and admire the bright city behind you.

This game need two players. When one of them wins, a dialog will popup and ask for retry or quit the game.

Shifumi game ✌🖐👊

Rock Paper Scissors game against the Computer. Purple design is back.

The rules are simple : to win, your score must be higher than computer's score. You can stop a any moment by pressing the "Quit game" button. A dialog (another one) will popup and ask you to confirm.

Similarly to the snake game, your best score will be registered in the database and shown on the home page in the user's profile

Images slider 🖼

Welcome in my short collection of city images.

You can stop the scrolling effect by clicking on the admire button. To navigate through the slider, you can use the arrow buttons or directly the LEFT and RIGHT arrow key. This project is fully responsive.

Dynamic Stopwatch ⏱

A stopwatch with three (3) main options:

Start
Pause
Reset

Lighting effect when you hover the clock image.

New York Simple Clock ⌚

A simple clock that display :

current time code HH:MM:SS and you can add the milliseconds
A greeting depending of the moment of the day
The date on, the format DayOfWeek Month Day Year
an option to show or hide milliseconds

Classic To do List 📋

The classic

Forgotten Password Management

On the login page you have the option Forgot password

Click on it and you will be redirected to a page that asks you your email address. Provide it and submit. You will receive an email Friedrich Corner that gives you a code to reset the password.

After entered the right code, you will be redirected to the last page that needs the new password. Confirm it and submit.

You will be back on the login page. Congratulations, your password has been reset.

Installation : Run locally

You can run the project locally. Start by cloning the repository with the command :

  git clone https://github.com/Friedrich482/php-fullstack-app.git

After install the npm dependencies via :

  npm install

Also install php on your local machine.

You will need a local server. Because it is PHP, I recommend you applications like MAMP or XAMPP. They will install a local Apache Server to serve the project. Personally I prefer MAMP.

After that, you also need PHP dependencies installed via Composer. Install them with the command :

  composer update

Then run by opening the login folder and open the login.php file.

Environment variables

If you are running the project locally, you will need to create two .env files based on the .env.example files in the login and the include folders.

    mailUsername = "example@gmail.com" # The email address goes here
    mailPassword = "xxxx xxxx xxxx xxxx" # Your code for smtp server
    mailAddress = "example@gmail.com" # The email address also goes here
    mailName = "example Example" # Your email username

I need to add some precisions here. In fact, I used the PHPMailer package in order to send mail for the reset password option. To run in local, you'll need tour own SMTP Server. Create one using Gmail. And fill the template with the data specified.

include folder :

     dbServer = "localhost"
     dbUser = "postgres" # This is the username by default with a postgres database
     dbPass = "password" # The password for your database goes here
     dbName = "users_data" # The database name, I named it users_data

And also there is a apiKey.example.json file in the projects/fetch-weather-app

{"API_KEY" : "YOUR_OPENWEATHER_MAP_API_KEY"}

I used a key from openweathermap.org. So to run locally, you'll need your own key. Go there and subscribe (it is free) to get yours. After come back and just rename the apiKey.example.json into apiKey.json and paste your API key inside.

Database shape

You need to have postgreSQL installed. Create a database called users_data. After that you'll need to create a table called users I put the .sql file in the database folder

Project Roadmap

This list will be updated depending on my progression through it.

Friedrich482/php-fullstack-app