Skip to content

Latest commit

 

History

History
105 lines (77 loc) · 4.17 KB

README.md

File metadata and controls

105 lines (77 loc) · 4.17 KB
Raw

SilentFeedback Project Documentation

Overview

SilentFeedback is a feedback platform enabling users to give and receive anonymous messages in a secure and streamlined environment. This app is built with Next.js and the MERN stack (MongoDB, Express, React, and Node.js), ensuring a powerful, scalable experience.

📸 Screenshots

Home Page

Home Page

Verified User Dashboard

Job Description Input

Anonymous Person Sending Message To Verified User

Generated Interview Questions

Key Features:

  • Anonymity First: Allow users to share genuine feedback without revealing identities.
  • Seamless Experience: Optimized with Next.js and Tailwind CSS for speed and elegance.
  • Real-Time Messaging: Efficiently powered by the MERN stack and secure backend.

Directory Structure

src
├───app
│   ├───(app) - Main application files
│   ├───(auth) - Authentication-related routes
│   │   ├───sign-in - User sign-in page
│   │   ├───sign-up - User sign-up page
│   │   └───verify/[username] - Account verification
│   ├───api - Backend API routes
│   │   ├───auth/[...nextauth] - Authentication handling via NextAuth
│   │   ├───accept-messages - Accept feedback messages
│   │   ├───delete-message/[messageid] - Delete specific messages
│   │   ├───get-messages - Retrieve user messages
│   │   ├───send-message - Route for sending messages
│   │   ├───check-username-unique - Check if username is unique
│   │   ├───sign-up - Registration API route
│   │   ├───suggest-messages - Suggestions for messages
│   │   └───verify-code - Email/code verification
│   ├───fonts - Custom fonts for the UI
│   └───u/[username] - User profiles
├───components
│   └───ui - UI components like buttons, forms, etc.
├───context - Context providers, e.g., AuthProvider for user authentication
├───helpers - Helper functions for common operations
├───hooks - Custom React hooks for reusable logic
├───lib - Libraries for database connections or API clients
├───model - Database models for MongoDB collections
├───schemas - Validation schemas for data consistency
└───types - Type definitions for TypeScript

Key Functional Modules

  • Authentication (app/(auth)): Handles user login, signup, and account verification.
  • API (app/api): Defines all backend routes for processing feedback, managing accounts, and interacting with the MongoDB database.
  • User Profiles (app/u/[username]): Each user has a profile page where they can view their feedback.
  • Reusable Components (components/ui): Pre-built UI elements for consistent design.
  • Context (context): Context providers, especially for authentication, allowing global access to user data.
  • Database Models (model): MongoDB models for schema-based interaction with the database, ensuring data integrity.

Getting Started

  1. Installation: Clone the repo, then run npm install to install dependencies.
  2. Environment Setup: Create a .env file with necessary environment variables (database URL, NextAuth secrets, etc.).
  3. Running Locally: Use npm run dev to start the development server at http://localhost:3000.
  4. Build and Deploy: Run npm run build for production builds. Deploy using platforms like Vercel for serverless deployment.

For next-auth setup

  • should have knowledge of provider and callbacks.
  • set up next auth.

Lucide-react

  • there are many icons (available here)

ui.shadcn

  • components used from shadcn
  • docs

usehooks-ts

  • useDebounceValue
  • docs

react-hook-form