GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → hoangvvo → Nextjs Mongodb App

hoangvvo / Nextjs Mongodb App

Licence: mit
A Next.js and MongoDB web application, designed with simplicity for learning and real-world applicability in mind.

Programming Languages

javascript
184084 projects - #8 most used programming language

Labels

mongodbboilerplatenextjsfull-stack

Projects that are alternatives of or similar to Nextjs Mongodb App

Mevn Boilerplate
A fullstack boilerplate with Mongo, ExpressJS, VueJS and NodeJS.
Stars: ✭ 277 (-60.09%)
Mutual labels:  mongodb, full-stack, boilerplate
Saas
Build your own SaaS business with SaaS boilerplate. Productive stack: React, Material-UI, Next, MobX, WebSockets, Express, Node, Mongoose, MongoDB. Written with TypeScript.
Stars: ✭ 2,720 (+291.93%)
Mutual labels:  mongodb, nextjs, boilerplate
Angular Full Stack
Angular Full Stack project built using Angular, Express, Mongoose and Node. Whole stack in TypeScript.
Stars: ✭ 1,261 (+81.7%)
Mutual labels:  mongodb, full-stack, boilerplate
Builderbook
Open source web application to learn JS stack: React, Material-UI, Next.js, Node.js, Express.js, Mongoose, MongoDB database.
Stars: ✭ 3,015 (+334.44%)
Mutual labels:  mongodb, nextjs, boilerplate
Mevn Stack
A Quickstart for building an Express API with a VueJS Admin Portal
Stars: ✭ 178 (-74.35%)
Mutual labels:  mongodb, full-stack, boilerplate
Graphql Mongodb Server
A GraphQL MongoDB server.
Stars: ✭ 242 (-65.13%)
Mutual labels:  mongodb, boilerplate
Express Mongoose Es6 Rest Api
💥 A boilerplate application for building RESTful APIs Microservice in Node.js using express and mongoose in ES6 with code coverage and JsonWebToken Authentication
Stars: ✭ 2,811 (+305.04%)
Mutual labels:  mongodb, boilerplate
Fullstack Apollo Express Mongodb Boilerplate
💥A sophisticated GraphQL with Apollo, Express and MongoDB boilerplate project.
Stars: ✭ 301 (-56.63%)
Mutual labels:  mongodb, boilerplate
Drywall
🚧 Project moved, see Aqua and Frame
Stars: ✭ 2,205 (+217.72%)
Mutual labels:  mongodb, boilerplate
Mern Social
A MERN stack based social media application [Full-Stack React Projects]
Stars: ✭ 288 (-58.5%)
Mutual labels:  mongodb, full-stack
Bulletproof Nodejs
Implementation of a bulletproof node.js API 🛡️
Stars: ✭ 4,369 (+529.54%)
Mutual labels:  mongodb, boilerplate
Mern Boilerplate
MERN stack project boilerplate
Stars: ✭ 211 (-69.6%)
Mutual labels:  mongodb, boilerplate
Nobibi
一款基于Next.js+mongo的轻量级开源社区（open community by Next.js & mongo）
Stars: ✭ 209 (-69.88%)
Mutual labels:  mongodb, nextjs
Stackoverflow Clone
This project is a simplified a full stack clone of Stackoverflow.
Stars: ✭ 395 (-43.08%)
Mutual labels:  mongodb, nextjs
Superplate
Performance-oriented frontend application creator with popular tools.
Stars: ✭ 368 (-46.97%)
Mutual labels:  nextjs, boilerplate
Example Storefront
Example Storefront is Reaction Commerce’s headless ecommerce storefront - Next.js, GraphQL, React. Built using Apollo Client and the commerce-focused React UI components provided in the Storefront Component Library (reactioncommerce/reaction-component-library). It connects with Reaction backend with the GraphQL API.
Stars: ✭ 471 (-32.13%)
Mutual labels:  mongodb, nextjs
Express Graphql Mongodb Boilerplate
A boilerplate for Node.js apps / GraphQL-API / Authentication from scratch - express, graphql - (graphql compose), mongodb (mongoose).
Stars: ✭ 288 (-58.5%)
Mutual labels:  mongodb, boilerplate
Rest Api Nodejs Mongodb
A boilerplate for REST API Development with Node.js, Express, and MongoDB
Stars: ✭ 672 (-3.17%)
Mutual labels:  mongodb, boilerplate
Node Rem
Node REM - NodeJS Rest Express MongoDB and more: typescript, passport, JWT, socket.io, HTTPS, HTTP2, async/await, nodemailer, templates, pagination, docker, etc. Live Demo: https://node-rem-ngduc.vercel.app
Stars: ✭ 192 (-72.33%)
Mutual labels:  mongodb, boilerplate
Mern Marketplace
A MERN stack based online marketplace application [Full-Stack React Projects]
Stars: ✭ 194 (-72.05%)
Mutual labels:  mongodb, full-stack
View All Similar Projects ➔

Next.js

Next.js ❤️ MongoDB

Deploy with ZEIT Now

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 Express.js.
  • ✨ Full API Routes implementation and 👻 Serverless ready
  • 🤠 Good ol' Middleware pattern
  • 💋 KISS: No fancy stuff like GraphQL, SASS, Redux, etc.
  • ✍️ Come with explanatory blog posts
  • ✌️ Can be adapted to any databases besides MongoDB

🔒 Authentication and Account

without passportjs: a1747b7 with passportjs: master

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

👩👨 Profile

  • [x] Profile picture, name, bio, email
  • [x] Update user profile

👀 Social

  • [x] View others' profiles and posts
  • [x] Public postings like Twitter and Facebook

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.

The project is designed to as simple as possible for learning purpose. Due to its simplicity, aspects such as security must be reconsidered before being used in production.

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
  • mongodb - may be replaced by mongoose.
  • passport, passport-local - required after #39 for authentication
  • next-connect - recommended if you want to use Express/Connect middleware and easier method routing.
  • express-session, connect-mongo - required for session, may be replaced with other session libraries such as cookie-session or next-iron-session.
  • bcryptjs - optional, may be replaced with any password-hashing library. argon2 recommended.
  • validator - optional but recommended.
  • multer - may be replaced with any middleware that handles multipart/form-data
  • cloudinary - optional, only if you are using Cloudinary for image upload.
  • @sendgrid/mail - optional, only if you are using SendGrid to send emails.

Environmental variables

The environment variables will be inlined during build time

Environmental variables in this project include:

  • MONGODB_URI The MongoDB Connection String (with credentials)
  • EMAIL_FROM The email address to send your emails from.
  • DB_NAME The name of the MongoDB database to be used.
  • WEB_URI The URL of your web.
  • SESSION_SECRET (only if you use express-session) The secret to be used in express-session.
  • CLOUDINARY_URL (optional, Cloudinary only) Cloudinary environment variable for configuration. See this.
  • SENDGRID_API_KEY (optional, SendGrid only) SendGrid API Key. See this.

Development

Start the development server by running yarn dev or npm run dev. The project supports using .env. Getting started by create a .env file with the above variables.

.env

I include my own environment variables in .env.example for experimentation purposes. Please replace them with your owns and refrain from sabotaging them. You can try them in development by renaming it into .env.

In production, it is recommended to set the environment variables using the options provided by your cloud/hosting providers. Do not use or commit .env.

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].