https://github.com/spcf-deepfake-detector/df-frontend

A React-based frontend application for our deepfake project, utilizing Mantine for UI components, React Router for seamless navigation, Zustand for state management, and Axios for efficient API communications.
https://github.com/spcf-deepfake-detector/df-frontend

axios css frontend html javascript react react-router reactjs webapp zustand

Last synced: 4 months ago
JSON representation

A React-based frontend application for our deepfake project, utilizing Mantine for UI components, React Router for seamless navigation, Zustand for state management, and Axios for efficient API communications.

• Host: GitHub
• URL: https://github.com/spcf-deepfake-detector/df-frontend
• Owner: spcf-deepfake-detector
• Created: 2024-11-25T07:04:44.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-05-26T03:19:42.000Z (about 1 year ago)
• Last Synced: 2025-05-30T00:41:47.768Z (about 1 year ago)
• Topics: axios, css, frontend, html, javascript, react, react-router, reactjs, webapp, zustand
• Language: JavaScript
• Homepage:
• Size: 11.3 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# 🎬 Deepfake Frontend Application 🤖

## 📝 Overview

A cutting-edge React-based frontend application for our deepfake project, crafted with modern web technologies to deliver an intuitive and powerful user experience.

## 🚀 Technologies

- ![React](https://img.shields.io/badge/React-61DAFB?logo=react&logoColor=white)

- ![Mantine](https://img.shields.io/badge/Mantine-339AF0?logo=mantine&logoColor=white)

- ![React Router](https://img.shields.io/badge/React_Router-CA4245?logo=react-router&logoColor=white)

- ![Zustand](https://img.shields.io/badge/Zustand-764ABC?logo=react&logoColor=white)

- ![Axios](https://img.shields.io/badge/Axios-5A29E4?logo=axios&logoColor=white)

## 🛠 Prerequisites

- Node.js (v16+)

- npm or yarn

## 💾 Installation

```bash

npm install

```

## 🏃‍♂️ Running the Application

```bash

npm run dev

```

## 🏗️ Building the Application

```bash

npm run build

```

## 🕵️ Code Quality Check

```bash

npm run lint

```

## ✨ Features

- 📱 Responsive UI

- 🔀 Seamless client-side routing

- 🧩 Modular React architecture

- 🌐 Efficient state management with Zustand

- 🚀 Streamlined API communications using Axios

## 📋 Commit Message Conventions

Standardized emojis to communicate the nature of changes:

- 💯 (`:100:`) Full functionality implementation

- 🔧 (`:wrench:`) Code improvements or structural changes

- 🐛 (`:bug:`) Bug fixes

- 📑 (`:bookmark_tabs:`) Code documentation and comments

- ☕ (`:coffee:`) Minor or initial changes

- 🚧 (`:construction:`) Work in progress

- 🗑️ (`:wastebasket:`) Code or file removal

- 📓 (`:notebook:`) README updates

- ✏️ (`:pencil2:`) Typo fixes or renaming

- ♻️ (`:recycle:`) Code refactoring

- 🔀 (`:twisted_rightwards_arrows:`) Branch merging

- ⏪ (`:rewind:`) Change reversion

- 📱 (`:iphone:`) Responsive design work

- 📌 (`:pushpin:`) Hotfix

## 👥 Development Team

- 👨‍💻 **Gabriel Alfonso M. Gatbonton** - Senior Frontend Developer

- 👨‍💻 **Rhymeses E. Cortez** - Junior Frontend Developer

- 👨‍💻 **John Carlo D. Paz** - Junior Frontend Developer

- 👨‍💻 **Jose Gabriel B. Cruz** - Junior Frontend Developer