Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/fingertips18/junior-fullstack-exam
This repository contains my junior full stack developer exam project, built using Next.js for the frontend and Flask for the backend. The project demonstrates the integration of a modern React-based frontend with a robust Python-based backend API, showcasing my skills in full stack development.
https://github.com/fingertips18/junior-fullstack-exam
backend-api flask flask-restful flask-sqlalchemy front-end fullstack-development jwt-authentication nextjs python typescript
Last synced: 18 days ago
JSON representation
This repository contains my junior full stack developer exam project, built using Next.js for the frontend and Flask for the backend. The project demonstrates the integration of a modern React-based frontend with a robust Python-based backend API, showcasing my skills in full stack development.
- Host: GitHub
- URL: https://github.com/fingertips18/junior-fullstack-exam
- Owner: Fingertips18
- License: mit
- Created: 2024-08-19T11:14:58.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-08-29T15:50:35.000Z (4 months ago)
- Last Synced: 2024-08-29T17:37:57.685Z (4 months ago)
- Topics: backend-api, flask, flask-restful, flask-sqlalchemy, front-end, fullstack-development, jwt-authentication, nextjs, python, typescript
- Language: TypeScript
- Homepage: https://junior-fullstack-exam-fingertips.vercel.app
- Size: 1.3 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🛠️ Junior Full-Stack Exam Project: Next.js & Flask
This project is a full-stack web application developed as part of a junior full-stack developer exam. It features a Next.js frontend, a Flask backend, and implements CRUD operations with JWT-based authentication.
## 📚 Table of Contents
- 🔧 [Technologies Used](#tech-used)
- ✨ [Features](#features)
- 📖 [Setup Instructions](#setup)
- 🐍 [Backend (Flask)](#backend)
- ⚛️ [Frontend (Next.js)](#frontend)
- 🔑 [Environment Variables](#env)
- 🚀 [Running the Application](#run-app)
- 📡 [API Endpoints](#api)
- 🔒 [Authentication](#auth)
- 🤝 [Contributing](#contributing)
- 📜 [License](#license)
## 🔧 Technologies Used
- **Frontend**: Next.js (React) ⚛️
- **Backend**: Flask (Python) 🐍
- **Database**: SQLite 🗄️
- **Authentication**: JWT (JSON Web Tokens) 🔐
## ✨ Features
- **🔒 User Authentication**: Sign-up, login, and JWT-based authentication.
- **📝 CRUD Operations**: Create, Read, Update, and Delete operations for the application’s data models.
- **📱 Responsive UI**: Developed using React components.
- **📡 API**: RESTful API built with Flask.
## 📖 Setup Instructions
### 🐍 Backend (Flask)
1. **Clone the repository**:
```bash
git clone https://github.com/Fingertips18/junior-fullstack-exam.git
cd your-repo/backend
```
2. **Create a virtual environment and install dependencies**:
```bash
py -m venv venv
source venv/bin/activate # On Windows use `venv\Scripts\activate`
pip install -r requirements.txt
```
3. **Set up environment variables. Create a `.env` file in the backend directory:**:
```bash
SECRET_KEY=your-secret-key
ADMIN_USERNAME=Administrator
[email protected]
ADMIN_PASSWORD=password123
TEST_USERNAME=test
[email protected]
TEST_PASSWORD=password123
```
4. **Run the backend server**:
```bash
py main.py
```
### ⚛️ Frontend (Next.js)
1. **Navigate to the frontend directory**:
```bash
cd ../frontend
```
2. **Install dependencies**:
```bash
npm install
```
3. **Set up environment variables. Create a `.env.local` file in the frontend directory:**:
```bash
BASE_URL=http://localhost:5000 # Adjust the backend URL if necessary
SECRET_KEY=your-secret-key
```
4. **Run the frontend server**:
```bash
npm run dev
```
The following environment variables should be set:
- **Backend** (`.env`):
- `SECRET_KEY`: Secret key for JWT encryption.
- `ADMIN_USERNAME`: Use for testing admin username.
- `ADMIN_EMAIL`: Use for testing admin email.
- `ADMIN_PASSWORD`: Use for testing admin password.
- `TEST_USERNAME`: Use for testing test user username.
- `TEST_EMAIL`: Use for testing test user email.
- `TEST_PASSWORD`: Use for testing test user password.
- **Frontend** (`.env.local`):
- `BASE_URL`: URL of the Flask API.
- `SECRET_KEY`: Ensures that the data within the token has not been tampered with and confirms the authenticity of the token/user.
- **Backend**: `py main.py` or `flask run`
- **Frontend**: `npm run dev`
- Visit `http://localhost:3000` for the frontend and `http://localhost:5000` for the backend.
## 📡 API Endpoints
- **Root**:
- `GET /`: The root of the server
- If no `token` is found, a `sign in form` will be show
- **Authentication**:
- `POST /sign-up`: Register a new user.
- `POST /sign-in`: Authenticate user and receive JWT.
- `POST /refresh`: Refresh JWT.
- **Item CRUD Operations**:
- `GET /api/items`: Retrieve all items.
- `POST /api/items`: Create a new item.
- `PUT /api/items/:id`: Update an existing item.
- `DELETE /api/items/:id`: Delete an item.
- **User Operations** (for testing purposes)
- `GET /api/users`: Retrieve all users
- `DELETE /api/users/:id`: Delete a user
## 🔒 Authentication
This project uses JWT for secure authentication. Tokens are stored in cookies with `HttpOnly` and `SameSite` attributes for enhanced security.
Both the `frontend` and `backend` handle the verification and expiration of the token.
## 🤝 Contributing
Feel free to fork this repository and contribute by submitting a pull request. All contributions are welcome!
#### 🧑💻 Contributors
_Ghian Tan_ @ _Fingertips_ ([Github](https://github.com/Fingertips18))
## 📜 License
This project is licensed under the MIT License.