https://github.com/mmaffi/musicgallery-fullstack-postgresql
https://github.com/mmaffi/musicgallery-fullstack-postgresql
Last synced: 11 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/mmaffi/musicgallery-fullstack-postgresql
- Owner: MMaffi
- License: mit
- Created: 2025-08-06T16:19:40.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-08-23T11:35:08.000Z (11 months ago)
- Last Synced: 2025-08-23T17:24:20.178Z (11 months ago)
- Language: JavaScript
- Homepage: https://musicgallery.vercel.app
- Size: 834 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🎵 Music Gallery Fullstack
> An interactive gallery of music videos, focused on high-quality covers, built with a modern fullstack architecture.
[](LICENSE)
[](https://reactjs.org/)
[](https://nodejs.org/)
[](https://www.mysql.com/)
---
## 📸 Overview
**Music Gallery Fullstack** is the advanced version of the static website [Music Gallery](https://mmaffi.github.io/MusicGallery), now with complete features such as:
- User authentication and login
- Personalized settings persisted in the database
- Light/dark theme with per-user preferences
- Multilanguage support (i18n with `react-i18next`)
- Integration with the YouTube API (featured & latest videos)
- Music suggestion form
- Modern and responsive interface
---
## 🧠 Key Features
### 🔐 Authentication
- Register and Login authentication
- Route protection based on user authentication
### ⚙️ User Settings
- Preferences stored in the database (theme, language, notifications)
- Elegant settings modal using CSS variables for theming
### 🎬 Video Display
- Highlighted featured video section
- Dynamic video gallery powered by the YouTube API
- View count display in the video modal
- Infinite scroll and "Load More" functionality
### 🌐 Internationalization
- Support for Portuguese, English, and Spanish
- JSON-based translations integrated with `react-i18next`
### 💬 Music Suggestions
- Suggestion page with email delivery via backend
- Real-time feedback on form submission
---
## 📁 Project Structure
```bash
musicgallery-fullstack/
│
├── backend/ # Node.js + Express API
│ ├── controllers/ # API endpoint logic
│ ├── db/ # Database models (Users, Settings, etc.)
│ ├── middleware # auth.js
│ ├── routes/ # API routes
│ └── index.js # Server entry point
├── frontend/ # React application
│ ├── public/ # Public assets (manifest, icons, etc.)
│ ├── src/
│ │ ├── components/ # Reusable components (Navbar, Footer, etc.)
│ │ ├── context/ # React contexts (auth, settings, etc.)
│ │ ├── i18n/ # i18n config and translation files
│ │ ├── pages/ # Application pages (Home, Suggestions, etc.)
│ │ ├── styles/ # Modular and responsive CSS
│ │ └── main.jsx # React app entry point
│ └── vite.config.js # Vite build configuration
```
## 🚀 Technologies Used
```
| Layer | Stack |
|---------------|------------------------------------------------------------------------|
| Frontend | React, Vite, CSS, i18next |
| Backend | Node.js, Express, Nodemailer |
| Database | PostgreSQL |
| External APIs | YouTube Data API v3 |
```
---
## 🛠️ Installation & Setup
### 🔧 Prerequisites
- Node.js ≥ 18
- PostgreSQL ≥ 15
### 📦 Installation
```bash
git clone https://github.com/MMaffi/musicgallery-fullstack.git
cd musicgallery-fullstack
```
### 🔙 Backend
```bash
cd backend
cp .env.example .env
npm install
npm run build
```
### 🎨 Frontend
```bash
cd frontend
npm install
npm run build
```
## 🧪 Future Improvements
- Favorite system and user-created playlists
- Admin dashboard to manage suggestions
- Advanced search and filtering by genre/artist
- Custom video uploads by users
---
## 🤝 Contributing
Contributions are welcome! Feel free to open **issues**, **fork** the repository, and submit **pull requests**.
```bash
# Create your branch
git checkout -b my-feature
# Commit your changes
git commit -m "Add new feature"
# Push to remote
git push origin my-feature
```
## 📄 License
This project is licensed under the [MIT License](LICENSE).
---
## 🧑💻 Developed by
**Mateus Maffi**
[GitHub](https://github.com/MMaffi) • [LinkedIn](https://www.linkedin.com/in/mateusmaffi)
---
## ⭐ Give a Star!
If you like this project, consider giving it a ⭐ on the repository. It really helps!