Giter Club home page Giter Club logo

nextjs-mongodb-app's Introduction

Next.js

Next.js ❤️ MongoDB

Deploy with Vercel

An Next.js and MongoDB web application, designed with simplicity for learning and real-world applicability in mind.

🚀 Check out the demo 🚀

Features

🐇 Fast and light without bulky, slow Express.js.

✨ Full API Routes implementation and 👻 Serverless ready

🤠 Good ol' Middleware pattern, compatible with Express ecosystem, powered by next-connect

💋 KISS: No fancy stuff like GraphQL, SASS, Redux, etc. ✍️ Come with explanatory blog posts

📙 Can be adapted to any databases besides MongoDB (Just update api-lib/db)

🔒 Authentication and Account

  • Session-based authentication (Passport.js)
  • Sign up/Log in/Sign out API
  • Authentication via email/password
  • Authentication via OAuth (Google, Facebook, etc.)
  • Email verification
  • Password change
  • Password reset via email

👩👨 Profile

  • Profile picture, username, name, bio, email
  • Update user profile

👀 Social

  • View others' profiles
  • Posts and comments

Have any features that interest you, make an issue. Would like to work on a feature, make a PR.

Guide

This project accompanies the following posts:

Also check them out on dev.to.

Although the project is written to be secure, its simplicity requires careful considerations for usage in sensitive productions. File an issue if you spot any security problems.

Dependencies

This project uses the following dependencies:

  • next.js - v9.3 or above required for API Routes and new new data fetching method.
  • react - v16.8 or above required for react hooks.
  • react-dom - v16.8 or above.
  • swr - required for state management, may be replaced with react-query
  • mongodb - may be replaced by mongoose.
  • passport, passport-local - required for authentication.
  • next-connect - recommended if you want to use Express/Connect middleware and easier method routing.
  • next-session, connect-mongo - required for session, may be replaced with other session libraries such as cookie-session, next-iron-session, or express-session (express-session is observed not to work properly on Next.js 11+).
  • bcryptjs - optional, may be replaced with any password-hashing library. argon2 recommended.
  • validator - optional but recommended, to validate email.
  • ajv - optional but recommended, to validate request body.
  • multer - may be replaced with any middleware that handles multipart/form-data
  • cloudinary - optional, only if you are using Cloudinary for image upload.
  • several other optional dependencies for cosmetic purposes.
  • nodemailer - optional, only if you use it for email. It is recommended to use 3rd party services like Mailgun, AWS SES, etc. instead.

Environmental variables

Environmental variables in this project include:

  • MONGODB_URI The MongoDB Connection String (with credentials and database name)
  • WEB_URI The URL of your web app.
  • CLOUDINARY_URL (optional, Cloudinary only) Cloudinary environment variable for configuration. See this.
  • NODEMAILER_CONFIG (optional, if using nodemailer only) JSON stringified nodemailer config. eg. {"service":"Gmail","auth":{"user":"[email protected]","pass":"aHR0cHM6Ly95b3V0dS5iZS9kUXc0dzlXZ1hjUQ=="}}

Development

Start the development server by running yarn dev or npm run dev. Getting started by create a .env.local file with the above variables. See Environment Variables.

Deployment

This project can be deployed anywhere Next.js can be deployed. Make sure to set the environment variables using the options provided by your cloud/hosting providers.

After building using npm run build, simply start the server using npm run start.

You can also deploy this with serverless providers given the correct setup.

Contributing

Please see my contributing.md.

License

MIT

nextjs-mongodb-app's People

Contributors

danielmateoslab avatar dependabot-preview[bot] avatar hoangvvo avatar itaiaxelrad avatar mobihack avatar sabarasaba avatar timmee avatar victorfu avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.