aether-nest - GitLite

KO | EN

gitlite — search

#php #json #computer-vision #awesome #animation #git #security #pytorch #typescript #css

aether-nest

(★ 11)

A modern full-stack platform for discovering, creating, and organizing visual content with Flashes, Boards, and social features.

File Explorer

ZIP Download

- - authCtrl.js
  - boardCtrl.js
  - commentCtrl.js
  - flashCtrl.js
  - notifyCtrl.js
  - testCtrl.js
  - userCtrl.js
- - auth.js
- - boardModel.js
  - commentModel.js
  - flashModel.js
  - notifyModel.js
  - userModel.js
- - authRouter.js
  - boardRouter.js
  - commentRouter.js
  - flashRouter.js
  - index.js
  - notifyRouter.js
  - testRouter.js
  - userRouter.js
- - database.js
  - features.js
  - mail.js
  - modules.js
  - tools.js
  - validate.js
- .env.txt
- .gitattributes
- .gitignore
- index.js
- LICENSE
- package-lock.json
- package.json
- vercel.json
- - 1.png
  - 2.png
- - 1.png
  - 2.png
- - index.js
- - useStore.jsx
- - 404.js
  - 500.js
  - _app.js
  - _document.js
  - about.js
  - explore.js
  - index.js
- - android-chrome-192x192.png
  - android-chrome-512x512.png
  - apple-touch-icon.png
  - favicon-16x16.png
  - favicon-32x32.png
  - favicon.ico
  - index.html
  - logo.png
  - manifest.json
  - robots.txt
  - site.webmanifest
- - global.js
  - provider.js
- - global.css
- - fetchData.js
  - filesUpload.js
  - tools.js
  - validate.js
- .env.txt
- .eslintrc.json
- .gitattributes
- .gitignore
- jsconfig.json
- next.config.js
- package-lock.json
- package.json
- postcss.config.js
- tailwind.config.js
.gitattributes
banner.png
LICENSE
README.md

# Use via CDN

jsDelivr

jsDelivr serves any public GitHub repository as a CDN with zero setup. Pick a version and a file to get a ready-to-paste link and snippet.

Version

File

Link

Example

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<p align="center">
  <img src="banner.png" alt="Aether Nest Banner" width="100%">
</p>

<h1 align="center">Aether Nest</h1>

<p align="center">
  Aether Nest is a modern visual media platform for creating and organizing <strong>Flashes</strong> and <strong>Boards</strong>.
  It combines a polished Next.js client, an Express + MongoDB API, Cloudinary media uploads, and a clean responsive UI for discovery, saving, commenting, and profile management.
</p>

<p align="center">
  <img src="https://img.shields.io/badge/Frontend-Next.js%2013-000000?logo=next.js" alt="Next.js 13">
  <img src="https://img.shields.io/badge/Backend-Express.js-404D59?logo=express" alt="Express.js">
  <img src="https://img.shields.io/badge/Database-MongoDB-47A248?logo=mongodb&logoColor=white" alt="MongoDB">
  <img src="https://img.shields.io/badge/Styling-Tailwind_CSS-38B2AC?logo=tailwindcss&logoColor=white" alt="Tailwind CSS">
  <img src="https://img.shields.io/badge/Media-Cloudinary-3448C5?logo=cloudinary&logoColor=white" alt="Cloudinary">
  <img src="https://img.shields.io/badge/License-MIT-yellow" alt="MIT License">
</p>

<p align="center">
  <a href="#overview">Overview</a> |
  <a href="#features">Features</a> |
  <a href="#tech-stack">Tech Stack</a> |
  <a href="#project-structure">Structure</a> |
  <a href="#getting-started">Getting Started</a> |
  <a href="#environment-variables">Environment Variables</a> |
  <a href="#api-overview">API Overview</a> |
  <a href="#screenshots">Screenshots</a> |
  <a href="#deployment-notes">Deployment Notes</a>
</p>

## Overview

Aether Nest is a full-stack social content platform built around two primary content types:

- `Flashes`, which are media posts with titles, descriptions, tags, likes, views, saves, and comments.
- `Boards`, which are curated collections of Flashes with cover images, descriptions, views, saves, and board-level organization.

The codebase is split into two apps:

- `site/` contains the Next.js frontend.
- `api/` contains the Express.js backend, MongoDB models, authentication middleware, mail utilities, and REST routes.

The product supports user accounts, email activation, password reset, profile discovery, follow relationships, search, saved content, comment engagement, notifications, and theme customization.

## Features

### Authentication and Access

- Username availability checks during sign-up.
- Email-based account activation.
- Sign in with email or username.
- JWT access tokens with HTTP-only refresh token cookies.
- Forgot password and reset password flows.
- Protected API routes through authentication middleware.

### Profiles and Social Graph

- Editable profiles with profile image, cover image, full name, username, bio, website, gender, and pronouns.
- Public and private account support.
- Follow and unfollow flows.
- Followers and followings lists.
- Profile search and profile suggestions.
- Multi-account support in the UI.

### Flashes

- Create, edit, and delete Flash content.
- Media upload support through Cloudinary.
- Tags, likes, views, and saves.
- Search and explore flows.
- Related Flash recommendations on detail pages.
- Infinite-style feed loading.
- Download media and share Flash links.

### Boards

- Create, edit, and delete Boards.
- Add or remove Flashes from Boards.
- Board views and saves.
- User board listings and board detail pages.
- Board search and discovery.

### Comments and Notifications

- Create, update, and delete comments.
- Like and unlike comments.
- Reply-style comment threading.
- Notification creation, listing, read-all, delete-one, and clear-all actions.

### Interface and UX

- Responsive Next.js interface.
- Tailwind CSS styling with CSS-variable-driven theming.
- Light and dark mode support.
- Persistent theme selection in local storage.
- Dynamic theme color handling for the browser UI.
- Custom loaders, error pages, share modal, add-to-board modal, and reusable UI primitives.

## Tech Stack

| Layer | Technologies |
| --- | --- |
| Frontend | Next.js 13, React 18 |
| Styling | Tailwind CSS, PostCSS, Framer Motion |
| State Management | React context + reducer/action pattern |
| Backend | Node.js, Express.js |
| Database | MongoDB, Mongoose |
| Authentication | JWT, bcrypt, HTTP-only cookies |
| Media Storage | Cloudinary |
| Email | Nodemailer, Google OAuth2 |
| Utilities | `react-infinite-scroll-component`, `react-masonry-css`, `react-share`, `file-saver`, `moment` |

## Project Structure

```bash
aether-nest/
├── README.md
├── LICENSE
├── banner.png
├── screenshots/
├── api/
│   ├── index.js
│   ├── package.json
│   ├── routes/
│   ├── controllers/
│   ├── models/
│   ├── middlewares/
│   └── utils/
└── site/
    ├── package.json
    ├── next.config.js
    ├── pages/
    ├── components/
    ├── store/
    ├── hooks/
    ├── styles/
    ├── utils/
    └── public/
```

## Getting Started

### Prerequisites

- Node.js 16 or newer
- npm
- MongoDB database
- Cloudinary account for media uploads
- Gmail OAuth2 credentials for activation and password reset emails

### Install Dependencies

```bash
cd api
npm install

cd ../site
npm install
```

### Run the Backend

```bash
cd api
npm run dev
```

The API runs on `http://localhost:5000` by default unless `PORT` is set.

### Run the Frontend

```bash
cd site
npm run dev
```

The frontend runs on `http://localhost:3000`.

## Environment Variables

Create one `.env` file in `api/` and one `.env.local` file in `site/`.

### Backend: `api/.env`

```env
PORT=5000
MONGODB_URL=mongodb://127.0.0.1:27017/aether_nest
CLIENT_URL=http://localhost:3000

ACTIVATION_TOKEN_SECRET=your_activation_secret
ACCESS_TOKEN_SECRET=your_access_secret
REFRESH_TOKEN_SECRET=your_refresh_secret

MAILING_SERVICE_CLIENT_ID=your_google_oauth_client_id
MAILING_SERVICE_CLIENT_SECRET=your_google_oauth_client_secret
MAILING_SERVICE_REFRESH_TOKEN=your_google_oauth_refresh_token
SENDER_EMAIL_ADDRESS=your_email@example.com
```

### Frontend: `site/.env.local`

```env
NEXT_PUBLIC_API_URL=http://localhost:5000
NEXT_PUBLIC_BASE_URL=http://localhost:3000

NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=your_cloudinary_cloud_name
NEXT_PUBLIC_CLOUDINARY_UPLOAD_PRESET=your_unsigned_upload_preset
```

## Available Scripts

### Backend

| Command | Description |
| --- | --- |
| `npm start` | Start the Express server in production mode. |
| `npm run dev` | Start the Express server with Nodemon. |

### Frontend

| Command | Description |
| --- | --- |
| `npm run dev` | Start the Next.js development server. |
| `npm run build` | Build the frontend for production. |
| `npm start` | Start the production frontend after building. |
| `npm run lint` | Run Next.js linting. |

## API Overview

All backend routes are mounted under `/api`.

| Module | Main Routes |
| --- | --- |
| Auth | `POST /auth/check_username`, `POST /auth/sign_up`, `POST /auth/activate_user`, `POST /auth/sign_in`, `GET /auth/refresh_token/:id`, `GET /auth/sign_out/:id`, `POST /auth/forgot_password`, `POST /auth/reset_password` |
| Users | `GET /user/search`, `GET /user/check/:username`, `GET /user/username/:username`, `GET /user/:id`, `PATCH /user/update`, `PATCH /user/:id/follow`, `PATCH /user/:id/unfollow` |
| Flashes | `POST /flash/create`, `GET /flash/feed`, `GET /flash/random`, `GET /flash/get/:id`, `GET /flash/user/:id`, `PATCH /flash/save/:id`, `PATCH /flash/like/:id`, `PATCH /flash/view/:id`, `DELETE /flash/delete/:id` |
| Boards | `POST /board/create`, `GET /board/all`, `GET /board/get/:id`, `GET /board/get_flashes/:id`, `GET /board/user/:id`, `PATCH /board/save/:id`, `PATCH /board/view/:id`, `DELETE /board/delete/:id` |
| Comments | `POST /comment/create`, `PATCH /comment/update/:id`, `PATCH /comment/:id/like`, `PATCH /comment/:id/removelike`, `DELETE /comment/delete/:id` |
| Notifications | `GET /notify/all`, `POST /notify/create`, `PATCH /notify/read-all`, `DELETE /notify/id/:id`, `DELETE /notify/all` |
| Health Check | `GET /test` |

## Screenshots

The repository includes example UI screenshots in `screenshots/`.

<table align="center">
 <tr>  </tr>
  <tr>
    <td colspan="2" align="center"><strong>Light</strong></td>
  </tr>
  <tr>
    <td align="center">
      <img src="screenshots/light/1.png" width="420">
    </td>
    <td align="center">
      <img src="screenshots/light/2.png" width="420">
    </td>
  </tr>

<tr>
    <td colspan="2" align="center"><strong>Dark</strong></td>
  </tr>
  <tr>
    <td align="center">
      <img src="screenshots/dark/1.png" width="420">
    </td>
    <td align="center">
      <img src="screenshots/dark/2.png" width="420">
    </td>
  </tr>
</table>

## Deployment Notes

- `site/next.config.js` rewrites browser requests from `/api/:path*` to `NEXT_PUBLIC_API_URL`.
- `api/vercel.json` is included for backend deployment on Vercel.
- Configure production secrets and URLs in your hosting provider before deploying.
- Keep Cloudinary presets and JWT secrets private in production.
- Make sure MongoDB Atlas or your hosted database allows connections from the deployed API.

## License

This project is licensed under the MIT License. See [LICENSE](LICENSE) for details.

## Credits

Built by **Ashish Kumar**.