https://github.com/valentinmadiot/piquante-sauces_api
Application web fullstack Angular / Node.js dédiée au partage de sauces. Authentification sécurisée, upload d’images avec Cloudinary, CRUD REST complet, design responsive et déploiement live.
https://github.com/valentinmadiot/piquante-sauces_api
angular auth bcrypt cloudinary cors env express helmet image-upload js jwt mongodb mongoose multer nodejs openclassrooms render-api responisve rest-api vercel-hosting
Last synced: about 2 months ago
JSON representation
Application web fullstack Angular / Node.js dédiée au partage de sauces. Authentification sécurisée, upload d’images avec Cloudinary, CRUD REST complet, design responsive et déploiement live.
- Host: GitHub
- URL: https://github.com/valentinmadiot/piquante-sauces_api
- Owner: ValentinMadiot
- Created: 2022-08-26T15:25:18.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2025-06-24T16:56:49.000Z (about 1 year ago)
- Last Synced: 2025-06-24T17:50:29.956Z (about 1 year ago)
- Topics: angular, auth, bcrypt, cloudinary, cors, env, express, helmet, image-upload, js, jwt, mongodb, mongoose, multer, nodejs, openclassrooms, render-api, responisve, rest-api, vercel-hosting
- Language: TypeScript
- Homepage: https://piquante-sauces.vercel.app/signup
- Size: 10.8 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
##
📌 Sommaire
🎨 [**Introduction**](#introduction)
🛠️ [**Technologies**](#technologies)
🎯 [**Fonctionnalités**](#fonctionnalités)
🚧 [**Mise à Jour**](#upgrade)
🚀 [**Installation**](#installation)
Piquante est une application web fullstack dédiée au partage de sauces piquantes.
Basée sur un backend **Node.js** / **Express** connecté à **MongoDB**, et un frontend **Angular** moderne et responsive.
Les utilisateurs peuvent s’inscrire, publier des sauces, voter (like/dislike), et gérer leurs propres créations via une API REST sécurisée.
> 📂 Pour plus de détails, consultez le [dossier](.docs/).
- **Backend** : Node.js, Express, Mongoose, bcrypt, JSON Web Token (JWT)
- **Frontend** : Angular, RxJS
- **Base de données** : MongoDB Atlas ou MongoDB Compass local
- **Déploiement** : Render (API), Vercel (UI)
- **Image hosting** : Cloudinary
- Authentification sécurisée (bcrypt + JWT)
- CRUD complet sur les sauces avec image
- Upload intelligent : local (dev) / Cloudinary (prod)
- Like / Dislike par utilisateur unique
- API REST sécurisée via JWT
- Interface Angular responsive
- Affichage des erreurs serveur côté client
- Hébergement d’images via Cloudinary (CDN, compression, nettoyage automatique)
- Détection automatique de l’environnement : dev ou prod
- Gestion des erreurs enrichie côté client & serveur
- Upload intelligent : local en développement, Cloudinary en production
- Refactor : structure `api/` (backend) et `public/` (frontend)
- Déploiement performant via [**Render**](https://piquante-sauces-api.onrender.com) (API) & [**Vercel**](https://piquante-sauces.vercel.app) (UI)
### ✅ Prérequis
- [Git](https://git-scm.com/) — Système de gestion de versions
- [Node.js](https://nodejs.org/fr) — Exécuteur local de scripts JavaScript
- [npm](https://www.npmjs.com/) — Gestionnaire de paquets JavaScript
- [MongoDB](https://www.mongodb.com/) — Base de données NoSQL
- [Google Chrome](https://www.google.com/) — Navigateur moderne
- [Visual Studio Code](https://code.visualstudio.com/) — Éditeur de code
- [Render](https://render.com/) — Déploiement de l’API en production
- [Cloudinary](https://cloudinary.com/) — Hébergement et optimisation des images
- [Vercel](https://vercel.com/home) — Déploiement du frontend en production
### 📥 Cloner le projet
```bash
git clone https://github.com/ValentinMadiot/piquante-sauces_api
cd piquante-sauces_api
```
### 📝 Configuration de l’environnement
#### 1. DEVELOPPEMENT (Local)
Renommer `.env.exemple` en `.env` dans `./api`
Ajoutez les variables d’environnement dans le fichier `.env` :
```bash
# IDENTIFIANT BASE DE DONNEES (MongoDB)
MONGODB_URI_DEV=mongodb://localhost:27017/piquante
# PASSWORD JWT (JSON Web Token)
JWT_TOKEN=secret_token
# ENVIRONNEMENT D'EXÉCUTION (dev = Stockage Local)
NODE_ENV=development
```
#### 2.1 PRODUCTION (Render)
Ajoutez les variables d’environnement sur Render :
```bash
# IDENTIFIANT BASE DE DONNEES (MongoDB)
MONGODB_URI_PROD=mongodb+srv://:@cluster0.mongodb.net/myDatabase...
# PASSWORD JWT (JSON Web Token)
JWT_TOKEN=secret_token
# ENVIRONNEMENT D'EXÉCUTION (prod = Cloudinary)
NODE_ENV=production
# IDENTIFIANT CLOUDINARY
CLOUD_API_KEY=clef_api
CLOUD_API_SECRET=api_secrete
CLOUD_NAME=nom_du_stockage
```
#### 2.2 FRONTEND (Vercel)
Ajoutez les variables d’environnement sur Vercel :
```bash
# URL RENDER
API_URL=https://nom_projet.onrender.com
```
### ▶️ Lancer le projet
#### Backend
```bash
cd api
npm install
npm start
```
Backend disponible sur : `http://localhost:8080`
#### Frontend
```bash
cd public
npm install
npm start
```
Frontend disponible sur : `http://localhost:4200`