Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/hoangvvo/nextjs-mongodb-app

A Next.js and MongoDB web application, designed with simplicity for learning and real-world applicability in mind.
https://github.com/hoangvvo/nextjs-mongodb-app

boilerplate full-stack javascript mongodb nextjs real-life

Last synced: 5 days ago
JSON representation

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

Host: GitHub
URL: https://github.com/hoangvvo/nextjs-mongodb-app
Owner: hoangvvo
License: mit
Created: 2019-08-09T04:59:29.000Z (over 5 years ago)
Default Branch: v2
Last Pushed: 2024-03-20T03:28:34.000Z (9 months ago)
Last Synced: 2024-11-30T10:02:25.793Z (12 days ago)
Topics: boilerplate, full-stack, javascript, mongodb, nextjs, real-life
Language: JavaScript
Homepage: https://nextjs-mongodb.now.sh/
Size: 241 KB
Stars: 1,537
Watchers: 32
Forks: 289
Open Issues: 23
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE

Awesome Lists containing this project

awesome - hoangvvo/nextjs-mongodb-app - A Next.js and MongoDB web application, designed with simplicity for learning and real-world applicability in mind. (JavaScript)
awesome-boilerplate - NextJS MongoDB App - world applicability in mind. | (Javascript)
Awesome-NextJs - nextjs-mongodb-app - [demo](https://nextjs-mongodb.vercel.app/) (Nextjs Starter)
awesome-nextjs - nextjs-mongodb-app - Full-fledged app made with Next.JS and MongoDB, with authentication and much more (Next.js 9, MongoDB) (Boilerplates)
fucking-awesome-nextjs - nextjs-mongodb-app - Full-fledged app made with Next.JS and MongoDB, with authentication and much more (Next.js 9, MongoDB) (Boilerplates)

README

        [![Next.js](https://assets.zeit.co/image/upload/v1538361091/repositories/next-js/next-js.png)](https://nextjs.org)

Next.js ❤️ MongoDB




  

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fhoangvvo%2Fnextjs-mongodb-app&env=MONGODB_URI,CLOUDINARY_URL,NODEMAILER_CONFIG,WEB_URI&envDescription=Environment%20Variables&envLink=https%3A%2F%2Fgithub.com%2Fhoangvvo%2Fnextjs-mongodb-app%23environmental-variables&demo-title=nextjs-mongodb-app%20demo&demo-description=A%20demo%20deployed%20on%20Vercel&demo-url=https%3A%2F%2Fnextjs-mongodb.vercel.app%2F)

An [**Next.js**](https://github.com/zeit/next.js/) and [**MongoDB**](https://www.mongodb.com/) web application, designed with simplicity for learning and real-world applicability in mind.

:rocket: [Check out the demo](https://nextjs-mongodb.vercel.app/) :rocket:



Features




🐇 Fast and light without [bulky](https://bundlephobia.com/[email protected]), [slow](https://github.com/fastify/benchmarks#benchmarks) Express.js.

✨ Full [API Routes](https://nextjs.org/blog/next-9#api-routes) implementation and 👻 Serverless ready

🤠 Good ol' Middleware pattern, compatible with Express ecosystem, powered by [next-connect](https://github.com/hoangvvo/next-connect)

💋 [KISS](https://en.wikipedia.org/wiki/KISS_principle): 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](api-lib/db))



:lock: Authentication and Account




- [x] Session-based authentication ([Passport.js](https://github.com/jaredhanson/passport))

- [x] Sign up/Log 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



:woman::man: Profile




- [x] Profile picture, username, name, bio, email

- [x] Update user profile



:eyes: Social




- [x] View others' profiles

- [x] Posts and comments





  

^{Have any features that interest you, [make an issue](https://github.com/hoangvvo/nextjs-mongodb-app/issues). Would like to work on a feature, [make a PR](https://github.com/hoangvvo/nextjs-mongodb-app/pulls).}



Guide


This project accompanies the following posts:

- [User authentication (using Passport.js)](https://hoangvvo.com/blog/next-js-and-mongodb-app-1)

- [User profile and Profile Picture](https://hoangvvo.com/blog/next-js-and-mongodb-app-2)

- [Email Verification, Password Reset/Changee](https://hoangvvo.com/blog/next-js-and-mongodb-app-3)

- [Posts and comments](https://hoangvvo.com/blog/next-js-and-mongodb-app-4)

Also check them out on [dev.to](https://dev.to/hoangvvo).

Although the project is written to be secure, its simplicity requires careful considerations for usage in sensitive productions. [File an issue](https://github.com/hoangvvo/nextjs-mongodb-app/issues/new/choose) 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**](https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering).

- `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](https://cloudinary.com) 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](https://www.mailgun.com/), [AWS SES](https://aws.amazon.com/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](https://cloudinary.com/documentation/node_integration#configuration).

- `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](https://nextjs.org/docs/basic-features/environment-variables).

Deployment


This project can be deployed [anywhere Next.js can be deployed](https://nextjs.org/docs/deployment). 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](CONTRIBUTING.md).





  License





  

  [MIT](LICENSE)