Event Manager Application

Demo

https://nextjs-mongodb-events-manager-app.vercel.app/events

About the app

An event manager application with Next.js, MongoDB, Mongoose and a minimalist UI based on Styled Components 💅.

Features

• MVC Architecture
• Full API Routes implementation and Serverless ready
• Middleware pattern, compatible with Express ecosystem, powered by next-connect
• Clean minimalist UI based on Styled Components

Stack

Client: React 18, Next.js 13, Styled Components 6, Formik, Yup

Server: Next.js 13, Node 18, Mongoose 7

Development: Mongodb Memory Server, Jest, React Testing Library, MSW, ESLint, Prettier

Configuration

Step 1. Get the connection string of your MongoDB server

In the case of MongoDB Atlas, it should be a string like this:

mongodb+srv://<username>:<password>@my-project-abc123.mongodb.net/test?retryWrites=true&w=majority

For more details, follow this MongoDB Guide on how to connect to MongoDB.

Step 2. Set up environment variables

Copy the .env.local.example file in this directory to .env.local (which will be ignored by Git):

cp .env.local.example .env.local

Then set each variable on .env.local:

• MONGODB_URI should be the MongoDB connection string you got from step 1.

Step 3. Run Next.js in development mode

npm install
npm run dev

# or

yarn install
yarn dev

Your app should be up and running on http://localhost:3000! 🚀✨

License

MIT