🎯 Clique na imagem acima para acessar o projeto publicado
💡 Click on the image above to access the published project
Aplicação Full Stack desenvolvida com React + Node.js + Express + MongoDB, com autenticação via JWT, deploy em VPS Linux com Nginx, PM2 e HTTPS.
O projeto simula uma rede social de compartilhamento de cartões (cards), permitindo cadastro, login, edição de perfil, criação e interação com conteúdos.
🌐 Frontend: https://przn.jumpingcrab.com
🔗 Backend API: https://api.przn.jumpingcrab.com
Frontend (React)
↓
HTTPS (Nginx Reverse Proxy)
↓
Backend (Node.js + Express)
↓
MongoDB Database
🔗 Assista ao vídeo demonstrando a aplicação completa (5 minutos):
O vídeo apresenta:
- Deploy em produção (Frontend + Backend)
- Fluxo completo de autenticação
- Rotas protegidas com JWT
- Edição de perfil
- CRUD de cartões
- Demonstração técnica via Postman
Perfil editado
Perfil padrão
🔹 Frontend
- React
- Context API
- React Router
- Proteção de rotas
- JWT armazenado no localStorage
🔹 Backend
- Node.js
- Express
- MongoDB + Mongoose
- Autenticação JWT
- Middleware de autorização
- Tratamento centralizado de erros
🔹 Infraestrutura
- VPS Linux (Ubuntu)
- Nginx (Reverse Proxy)
- PM2 (Process Manager)
- SSL (HTTPS)
- Variáveis de ambiente
👤 Autenticação
- Cadastro de usuário
- Login com geração de JWT
- Rotas protegidas
- Logout
- Token com expiração
👤 Perfil
- Atualização de nome e descrição
- Atualização de avatar
🖼️ Cartões (Cards)
- Criar cartão
- Listar cartões
- Curtir / descurtir
- Remover cartão (proprietário)
Frontend
- React
- React Router DOM
- JavaScript (ES6+)
- HTML5
- CSS3
- Vite
Backend
- Node.js
- Express
- MongoDB
- Mongoose
- jsonwebtoken
- bcryptjs
- dotenv
project-root/
├── backend/
├── frontend/
└── README.md
🔄 Fluxo de Autenticação
- Usuário realiza login
- Backend valida credenciais
- Backend gera JWT
- Frontend armazena token
- Token enviado no header:
Authorization: Bearer <token>
- Middleware valida o token
- Acesso liberado às rotas protegidas
- Hash de senha com bcrypt
- JWT com expiração
- Middleware de autorização
- Validação de dados com Mongoose
- HTTPS com SSL
- Variáveis protegidas via .env
- Reverse proxy com Nginx
1️⃣ Backend
cd backend
npm install
npm run dev
2️⃣ Frontend
cd frontend
npm install
npm run dev
Marcio Perusin Desenvolvedor Full Stack
🔗 GitHub: https://github.com/Perozin
🔗 LinkedIn: https://www.linkedin.com/in/marcio-p-58162334
A production-ready Full Stack application built with React, Node.js, Express, and MongoDB, featuring secure authentication with JWT, reverse proxy configuration using Nginx, and deployment on a Linux VPS.
The project simulates a social platform where users can create, manage, and interact with cards (posts), including authentication, profile management, and protected routes.
🌐 Frontend: https://przn.jumpingcrab.com
🔗 Backend API: https://api.przn.jumpingcrab.com
React Frontend
↓
HTTPS (Nginx Reverse Proxy)
↓
Node.js + Express API
↓
MongoDB Database
🔗 Watch the full 5-minute technical walkthrough:
The video demonstrates:
- Production deployment
- Authentication flow
- JWT protected routes
- Profile editing
- Full CRUD operations
- Technical validation via Postman
Edited profile
Default profile
Authentication
- User registration (signup)
- User login (signin)
- JWT generation and validation
- Protected routes
- Token expiration handling
- Secure logout
User Profile
- Update name and description
- Update avatar
- Dynamic data loading after authentication
Cards Management
- Create new cards
- Fetch all cards
- Like / Unlike cards
- Delete cards (owner only)
Frontend
- React
- React Router DOM
- Context API
- JavaScript (ES6+)
- HTML5
- CSS3
- Vite
Backend
- Node.js
- Express
- MongoDB
- Mongoose
- JSON Web Token (jsonwebtoken)
- bcryptjs
- dotenv
Infrastructure
- Linux VPS (Ubuntu)
- Nginx (Reverse Proxy)
- PM2 (Process Manager)
- SSL (HTTPS)
- Environment variables configuration
1. User submits login credentials 2. Backend validates credentials 3. Backend generates a JWT 4. Frontend stores the token 5. Token is sent in request headers:
Authorization: Bearer <token>
6. Authorization middleware validates the token 7. Access to protected routes is granted
- Password hashing with bcrypt
- JWT with expiration
- Authorization middleware
- Centralized error handling
- Data validation with Mongoose
- HTTPS encryption
- Environment variables protection
- Reverse proxy security layer (Nginx)
📁 Repository Structure
project-root/
├── backend/
├── frontend/
└── README.md
Backend
cd backend
npm install
npm run dev
Frontend
cd frontend
npm install
npm run dev
- Production deployment (not just local development)
- Secure authentication architecture
- Full CRUD operations
- Clean code organization
- Environment-based configuration
- Real infrastructure setup
Marcio Perusin Full Stack Developer
GitHub: https://github.com/Perozin
LinkedIn: https://www.linkedin.com/in/marcio-p-58162334