Social App

Description

SocialApp is a Next.js application that is meant to organize and schedule social meetings. Social Events display on the main page, including location.

• The social events are saved on a MongoDB collection using MongoClient to communicate to Atlas, instantly updating social events by Authorized Users.
• User Authentification via firebase allows individuals ability to edit, delete & update applications not available to the general user. in-progress
• CSS.modules in combination with bootstraps provide a clean design aesthetic across the entire Next.js application.

Technology Stack

Front-End: HTML5, CSS, Next.js

APIs: MongoDB, Google Travel, in-progress

Back-End: MongoDB, Node.js

Run Code (Environment)

Next.js Helpful Hints (Node.js)

• confirm that config is up to date:

> node -v
> npm -v
> git --version

• Initial package.json & install dependencies (localhost: 3000):

> npx create-next-app <project name>
> cd <project name>
> npm install next react react-dom

• next-app application is not Typescript & uses 'next/router'
• Test front-end once pages are generated (ctrl-c to exit):

> npm run dev

Back-End Helpful Hints (Node.js)

MongoDB cluster

• Make MongDB Cluster (see resources):

> npm install mongodb

• Confirm mongodb version

> npm mongodb -v

• Config in Atlas (see resources):

  • Network: 'add current IP address"
  • Edit User: specific priviledges > "readWriteAnyDatabase"
  • Database: Cluster(): Connect: Drivers (option)

• API notes for Next.js:

  • all API's must be in 'api' folder in Next.js applications
  • MongoClient.connect(url)
    • url must have username:password (recomment autogenerate)
    • url collection naming example:
    • "net/< name of collection >?retryWRites=true..."

Required for api/meetup.js

import { MongoClient } from 'mongodb';

---

Deployment

Vercel (Next.js)

• Establish Vercel account (see resources)
• Acceptable Git Repository Provider (Github, Gitlab, BitBucket):

Additional Resources & Helpful Hints:

• Next.js

  • < Link /> uses href instead of to & getStaticProps/getStaticPath for Next.js.
  • next/head for meta-data
  • next/route & dynamic routes for Next.js
  • getStaticProps, specifically context
  • getStaticPaths, specifically fallback (true,false, 'blocking')
  • next/image for Images Optimization

• REACT.js docs

  • CSS modules to allow styles to be treated like objects.

• MongoDB will be used with Drivers (Atla Cluster())

• Vercel for Deployment Next.js

• GoogleMap API helpful hints.

• Always Stay Positive & When in Doubt Double Check Permissions :)