Skip to content

Latest commit

 

History

291 Commits

Folders and files

NameName
Last commit message
Last commit date
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

ParkShare

ParkShare is currently organized as two applications:

  • Next.js frontend: the ParkShare user interface, page navigation, forms, menus, themes, translations, mock parking listings, and Google Maps rental view.
  • Flask backend: the initial Python authentication application using Flask-Login, SQLAlchemy, and SQLite.

The intended architecture is:

Next.js frontend -> Flask API/backend -> database

The applications are partially connected. The frontend login now calls the Flask authentication API, while most other frontend features still use local state and mock data. The Flask backend currently handles authentication; cars, parking spots, rentals, and payments still need real models and API endpoints.

What We Did, Step by Step

Step 1: Make Flask Start

The Flask application factory used timedelta without importing it, which prevented the application from being created. We added the missing import.

We also updated the User model to match the authentication code by adding password-reset fields and the missing imports used by role_required. Passwords are stored as secure hashes, not plain text.

The new backend/run.py file is the direct Flask entry point. It creates the app and initializes database tables when the server starts.

Step 2: Add a Real Authentication API

The original Flask routes rendered HTML templates. We kept those routes and added JSON endpoints for the Next.js frontend:

POST /api/auth/register
POST /api/auth/login
GET  /api/auth/me
POST /api/auth/logout

These endpoints validate input, hash passwords, reject duplicate email addresses, create Flask-Login sessions, and return JSON responses. Local-development CORS support allows requests from Next.js on port 3000 to Flask on port 5000.

Older local SQLite databases did not contain the newer role and password-reset columns. Startup now upgrades those tables without deleting existing data.

Step 3: Connect the Next.js Login

The login page originally treated any non-empty form as successful and created a fake browser cookie called session=authenticated.

That behavior was removed. The page now sends the email, password, and remember-me value to Flask using fetch with credentials enabled. Flask verifies the credentials and creates the real session cookie. The frontend then redirects to the home page and displays backend errors when login fails.

The signup flow is also connected. The email entered on the first signup screen is carried to the registration screen, which sends the completed name, email, and password form to Flask. Successful registration returns the user to login; duplicate emails, short passwords, and connection errors are shown in the form.

Step 4: Save Registration Profile Data

The registration form now sends the phone country code, phone number, country, and city along with the name, email, and password. Flask validates these fields and saves them in the User table. The API also returns them in its user response.

The existing SQLite database is upgraded automatically with the new columns, so existing local users are preserved.

Step 5: Add Git Ignore Rules

The root .gitignore excludes generated and local-only files such as node_modules, Next.js build output, Python virtual environments, Python caches, SQLite databases, .env secrets, logs, and machine-specific editor files. Dependency lockfiles such as frontend/package-lock.json remain tracked.

Database

The local SQLite database is stored at:

backend/instance/db.sqlite

It currently contains the User table with email, password hash, name, phone, country, city, role, and password-reset fields. It does not yet contain cars, parking spots, rentals, or payments.

What Each Application Does

  • Next.js renders the user interface, handles page navigation and interaction, and calls Flask with fetch.
  • Flask validates requests, authenticates users, manages sessions, and reads or writes database records.
  • SQLite stores local development data.

The intended relationship is:

Next.js login form -> Flask API -> SQLite User table

Quick Start

Start the backend and frontend in two separate terminals. Start Flask first because the frontend login and registration forms send requests to it.

Terminal 1: Flask Backend

From Git Bash:

cd /c/Users/denni/ParkShare-main/backend
source .venv/Scripts/activate
pip install -r requirements.txt
python run.py

The backend will be available at http://127.0.0.1:5000.

Terminal 2: Next.js Frontend

From Git Bash:

cd /c/Users/denni/ParkShare-main/frontend
npm install
npm run dev

The frontend will be available at http://localhost:3000.

Open http://localhost:3000/SignUpPage to create an account, or open http://localhost:3000/LoginPage to log in.

Authentication API

The Flask backend now exposes these JSON endpoints:

POST /api/auth/register
POST /api/auth/login
GET  /api/auth/me
POST /api/auth/logout

Authentication uses the Flask-Login session cookie. Requests from the local Next.js server at http://localhost:3000 are allowed during development.

Running the Backend

Python must be installed first. From PowerShell:

cd C:\Users\cezara.dumitrescu\Documents\ParkShare\backend
python -m venv .venv
.\.venv\Scripts\Activate.ps1
pip install -r requirements.txt
python run.py

The Flask server runs at http://127.0.0.1:5000.

Test the home route from another PowerShell window:

Invoke-WebRequest http://127.0.0.1:5000

If PowerShell blocks Activate.ps1, use Git Bash or call the virtual-environment Python directly:

.\.venv\Scripts\python.exe -m pip install -r requirements.txt
.\.venv\Scripts\python.exe run.py

Running the Frontend

Node.js must be installed first. From a second PowerShell window:

cd C:\Users\cezara.dumitrescu\Documents\ParkShare\frontend
npm install
npm run dev

The Next.js app runs at http://localhost:3000.

From Git Bash:

cd /c/Users/cezara.dumitrescu/Documents/ParkShare/frontend
npm install
npm run dev

If Git Bash reports exit code 127 or says npm: command not found, restart Git Bash after installing Node.js. If needed, temporarily add the standard Node.js directory:

export PATH="$PATH:/c/Program Files/nodejs"
npm --version

The rental page can use Google Maps when NEXT_PUBLIC_GOOGLE_MAPS_API_KEY is configured in the frontend environment.

Run Flask and Next.js in separate terminals. Flask must be running before testing the frontend login.

Installing ParkShare as a PWA

The Next.js frontend includes a web app manifest, install icons, and a service worker. Deploy it at the site root over HTTPS (as on https://parkshare.adv.ro), then open the site in a supported browser:

  • In Chrome or Edge on desktop/Android, use the install icon in the address bar or the browser menu's Install ParkShare option.
  • On iPhone or iPad, open the site in Safari, tap Share, then choose Add to Home Screen.

The service worker caches the app's static JavaScript bundles and the offline page, but deliberately does not cache account pages, API responses, bookings, or other personal data. Parking and account features therefore still need an internet connection; offline use displays an explanatory page. After deploying an update to the service worker, close and reopen the app or reload once while online so the browser can activate the new version.

Google Sign-In Setup

Google sign-in is handled by the Flask backend. The backend loads backend/.env at startup if present, or you can configure these variables in the backend service environment (do not commit the client secret):

GOOGLE_CLIENT_ID=<Google OAuth client ID>
GOOGLE_CLIENT_SECRET=<Google OAuth client secret>
FRONTEND_URL=https://parkshare.adv.ro
FRONTEND_DOMAIN=parkshare.adv.ro

In Google Cloud Console, add this exact authorized redirect URI to the OAuth client:

https://parkshare.adv.ro/api/auth/google/callback

After setting the variables, restart the Flask backend. Verify the deployment with https://parkshare.adv.ro/api/auth/google/info; it should report "configured": true and the expected callback URL. If configured remains false, check that both Google credentials are present in the backend process environment and that Authlib is installed from backend/requirements.txt.

Validation Completed

The backend authentication flow was tested with Flask's test client:

Invalid registration: 400
Successful registration: 201
Duplicate registration: 409
Login: 200
Authenticated /me: 200
Logout: 200
Anonymous /me: 401

The Next.js production build also completed successfully, including its TypeScript check.

Next Development Step

Authentication and registration profile data are now connected. The next step is to add persistent models and API endpoints for cars and parking spots, then connect the corresponding frontend management pages.

About

ParkShare

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages