Repository files navigation

This is a url shortener app for a MEVN stack application with authentication. This is for a SPA (Single Page Application) workflow that uses theVite Build tool. This uses cookie based approach for authentication.

URL shortener services are tools that take long URLs and convert them into shorter, more manageable links. These services are particularly useful for sharing links on social media, in emails, or in any context where space is limited. Shortened URLs are easier to remember, type, and share. Additionally, many URL shortener services provide analytics to track the number of clicks, geographic location of the clicks, and other useful data.

Popular URL shortener services include Bitly, TinyURL, and Google's now-defunct goo.gl. These services often offer additional features such as custom short links, link expiration, and password protection. URL shorteners can also help in branding by allowing businesses to create custom short domains that reflect their brand identity.

It includes the following:

• Backend API with Express & MongoDB
• Routes for auth, logout, register, profile, update profile
• JWT authentication stored in HTTP-only cookie
• Protected routes and endpoints
• Custom middleware to check JSON web token and store in cookie
• Custom error middleware
• React frontend to register, login, logout, view profile, and update profile

• Create a MongoDB database and obtain yourMongoDB URI -MongoDB Atlas

Rename the.env.example file to.env and add the following

NODE_ENV = developmentPORT = 5000MONGO_URI = your mongodb uriJWT_SECRET = 'abc123'

Change the JWT_SECRET to what you want

npm installcd clientnpm install

# Run frontend (:3000) & backend (:5000)npm run dev# Run backend onlynpm run server

# Create frontend prod buildcd frontendnpm run build

npm install node-cron

Write the script to show all the users of the database connected every minute and run this script inside tha server.js file every minute using node-cron.

// index.js (with ES modules)import dotenv from 'dotenv';import mongoose from 'mongoose';import User from '../models/userModel.js'; // Import the User modeldotenv.config();async function connectAndShowUsers() {  try {    await mongoose.connect("mongodb://localhost:27017/mevn_url_shortener");    console.log('MongoDB Connected');    // Fetch all users    const users = await User.find({});    console.log('Users:', users);    // Optionally, process the users:    if (users && users.length > 0) {      users.forEach(user => {        console.log(`Username: ${user.username}, Email: ${user.email}`);      });    } else {        console.log("No users found");    }    // Close the connection (optional, but good practice):    await mongoose.disconnect();    console.log('MongoDB Disconnected');  } catch (error) {    console.error('Error:', error);  }}connectAndShowUsers();export default connectAndShowUsers;

Inside the server.js import and use it like this

import cron from 'node-cron';import connectAndShowUsers from './data/showUsers.js';cron.schedule('* * * * *', () => {  console.log('Running a task every minute');  // This would connect to MongoDb and show all users every minute  // connectAndShowUsers();});

That's it, it should now display all user data every minute on console. This runs independently of the main node server.

The application can be easily deployed using Docker containers. The application uses the following docker compose script to spawn 3 containers, one each for MongoDB, Express and Nginx

version: '3.8'services:  express:    build:      context: .      dockerfile: Dockerfile    container_name: express_miniurl    ports:      - 5000:5000    depends_on:      - mongo  mongo:    image: mongo    container_name: mongo_miniurl    restart: unless-stopped    volumes:      - ./mongo_data:/data/db    ports:      - '27017:27017'  nginx:    image: nginx    container_name: nginx_miniurl    restart: unless-stopped    ports:      - '80:80'    volumes:      - ./nginx/nginx.conf:/etc/nginx/nginx.conf    depends_on:      - expressvolumes:  mongo_data:    external: true

Nginx is optional, we use it to proxy all requests coming to port 80 or 443 to port 5000. Using Nginx we can directly deploy the application on a server with Docker installed on it with one single magical command

docker-compose up

We use volumes for data persistance if the mongoDB containers are destroyed for some reason.

That's it for now, if you liked this project consider giving it a star ⭐