PostNest Social Media Site

This application uses Vue 2 and Bootstrap on the frontend for an interactive and responsive UI. The backend is built with Laravel which uses MySQL for data management.

Live Demo

For a live demo of the application, please visit: https://darrels-authentication-form.web.app

Technologies Used

• Frontend: Vue 2 and Bootstrap
• Backend: Laravel, and MySQL
• Hosting: Firebase

Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.

Table of Contents

1. Installation
2. Running the Application
3. Screenshots

Installation

Here are the steps to install and setup the application.

Prerequisites

• NodeJS
• Vue CLI
• Laravel
• MySQL

Clone Repository

Clone the repository by running command:

git clone git@github.com:DarrelMendoza/authentication-form.git

Setting up the Backend

The Laravel file named app.php is located in the api folder.

1. Install XAMPP for our MySQL database.
2. Open XAMPP control panel and start the Apache and MySQL services.
3. Navigate to http://localhost/phpmyadmin/ on your browser.
4. Click on 'Import' and choose the exported database file from the db folder. Click 'Go' to import the database.
5. Install Laravel for our application's backend.
6. Navigate to the api folder.
7. Run composer install to install the required dependencies.
8. Run php artisan migrate to create the tables.

Setting up the Frontend

Make sure that you have the Vue CLI installed globally. If not, install it using the following command:

npm install -g @vue/cli

1. Navigate to the root directory of the project.
2. Run npm install to install all the required dependencies.

Running the Application

To run the application, you need to start both the backend and the frontend servers.

Running the Backend

Navigate to the api folder. Run the following command to start the server:

php artisan serve

You should now have your backend running on http://localhost:8000/.

Running the Frontend

Navigate to the root directory of the project. Run the following command to start the Vue dev server:

npm run dev

You should now have your frontend running on http://localhost:8080/. Visit http://localhost:8080/ in your browser. Your application should be up and running.

Screenshots

Below are some more screenshots demonstrating the features of the application.

Main Page

Registration Form

Login Form

Reset Password

Create a Post

Edit a Post

Delete a Post

Edit Account Details

Edit Account Password

Acknowledgements

• Vue 2
• Bootstrap
• Laravel
• MySQL
• Firebase

Feel free to fork this repository and enhance the application.