User Manager with Vue/Flask

Status: Completed

Project to manage users data

The project was created to facilitate user management, performing operations such as creating, editing, and deleting users. The structure is divided into two parts, /client and /server, where the front-end was developed with Vue.jsusing the PrimeVue component library, and the back-end with the Flask framework.

Stacks

Front-end

Package	Version
Vue.js	3.5.13
PrimeVue	4.2.5
TailwindCSS	3.4.17
Vue Router	4.5.0
Pinia	2.3.0
npm	10.9.0

Back-end

Pacote	Versão
Flask	3.1.0
Flask-Cors	5.0.0
pymongo	4.10.1
python-dotenv	1.0.1
Werkzeug	3.1.3
pip	24.3.1

Screenshots

1. Home Page

2) Add user modal

3) Edit user modal

3) Confirm delete

4) Confirm edit

How to run

After downloading and extracting the project, it is necessary to run some commands in the terminal. First, let's start with the client or front-end.

Now, how do I run this program? Follow the step-by-step guide below:

Let´s configure the front first:

On the terminal from Vs Code, type:

  cd client

Now you are in the client directory, run the second command to install all the packages we need:

  npm install 

And then, we have the last one:

  npm run dev 

The project is probably live at this point. You can access it by clicking on the link in the terminal or just copying and pasting this link into your browser: http://localhost:5173/

Now to the back-end

First, let's return to the root of the project, just type:

  cd .. 

and then:

  cd server

Now, within this directory, we need to install and start a virtual environment with Python, use the next command:

Windows

  py -3 -m venv env

Mac/Linux

  python3 -m venv .env

Here we need to activate the enviroment:

Windows

    env\scripts\activate

Mac/Linux

   . .env/bin/activate

Obs: On Windows, you might encounter issues starting the virtual environment due to PowerSheel , as it requires script execution permission. Therefore, I recommend switching to the Command Prompt , which in my view, makes things much easier.

Now, we are finally inside the environment. You will probably know this because at the beginning of the directory path, there is an (env). Now, we can finally install our packages.

Just run this code, to install all the packages:

   pip install -r requirements.txt

If everything went well, just run the server.

   flask run --port=5001 --debug

Now we have everything running, but there's one thing left to do: connect the project to MongoDB. It's quite easy. I'll leave a video for that here:

https://www.youtube.com/watch?v=6b3YH0kK3ig

After creating the server, we will only need three things. In the root of the project, create a file called .env. Inside it, create two environment variables: DATABASE_URL and MONGO_DB_NAME. In these two fields, you need to add the URL and the database name of your MongoDB server. I recommend setting db_name to 'user_data'.

   DATABASE_URL=<YourDBURL>
   MONGO_DB_NAME=users_data

Warning , if you are on Linux and have any issues using environment variables, add them temporarily to the terminal session or permanently, but honestly, just add them temporarily.

Add this:

   export DATABASE_URL="<YourDBURL>"

   export MONGO_DB_NAME=users_data

Alright, you've created your database and added the variables. Now we just need to add data to the database, and that's easy.

First, navigate to the app folder. In the terminal, within the server directory, type:

   cd app

And then type the following command in the terminal:

   python parser.py

If everything goes well, the database should now be populated with the JSON data. Click the following link, and the users should be displayed: http://localhost:5173/