ANONSEND.GIT

Unlock the Power of Secure Communication with AnonSend.git-Where Privacy Meets Simplicity!

Built with the tools and technologies:

🔗 Table of Contents

• 📍 Overview
• 👾 Features
• 📂 Repository Structure
• 🧩 Modules
• 🚀 Getting Started
  • 🔖 Prerequisites
  • 📦 Installation
  • 🤖 Usage
  • 🧪 Tests
• 📌 Project Roadmap
• 🤝 Contributing
• 🎗 License
• 🙌 Acknowledgments

---

📍 Overview

I created a true anonymous feedback system where users can receive feedback and messages on specific topics. The platform allows users to share a link where others can send feedback anonymously.

• Anonymous Feedback: Users can receive feedback anonymously through shared links.
• Email OTP Signup and Authentication: Implemented an email OTP signup process and user authentication using NextAuth.
• Type Validation: Utilized Zod for type validation to ensure data integrity.
• AI Summarization: Integrated OpenAI API to summarize feedback and extract key insights.
• Keyword Aggregation: Implemented functionality to aggregate and analyze keywords from feedback messages.
• Username Uniqueness Check: Incorporated debouncing to efficiently check for username uniqueness.

Technologies Used

• Framework: Next.js
• Frontend: React, Shadcn, TailwindCSS
• Database: MongoDB
• APIs and Services: OpenAI API, Resend for OTP delivery, Vercel AI SDK
• Validation: Zod
• Language: TypeScript

Description

The system leverages Next.js and React for a seamless user experience and efficient development. MongoDB serves as the database for storing feedback and user information, while the OpenAI API enhances the user experience with AI-powered summarization. Zod ensures type safety and data validation throughout the application. The integration of Resend and Vercel AI SDK further streamlines user authentication and feedback processing.

👾 Features

	Feature	Description
⚙️	Architecture	Next.js based project leveraging TypeScript for type safety and React for frontend development. Follows a component-based structure for modularity and separation of concerns. MongoDB used as the database backend for data storage.
🔩	Code Quality	Codebase maintains good quality with TypeScript enforcing strict typing rules and ESLint for linting. Follows modern JavaScript best practices.
📄	Documentation	Adequate inline comments and README present. Could benefit from more detailed documentation covering architecture and development setup.
🔌	Integrations	Integrates with various libraries like bcrypt for password hashing, mongoose for MongoDB interactions, NextAuth for authentication, and Axios for API requests.
🧩	Modularity	Components structured for reusability and maintainability. Encourages separation of concerns through clear component responsibilities.
🧪	Testing	Testing frameworks like bcrypt-js for unit tests and possibly React Testing Library or Jest for frontend testing could be beneficial.
⚡️	Performance	Performance is dependent on the efficiency of MongoDB queries and frontend rendering speed. Could benefit from optimizing database queries and frontend assets.
🛡️	Security	Implements bcrypt for password hashing, uses JWT tokens for authentication, and NextAuth for secure user sessions. Room for improvement in data validation and input sanitization.
📦	Dependencies	Relies on a wide range of dependencies including Next.js, TypeScript, bcrypt, mongoose, and Tailwind CSS for styling.

---

📂 Repository Structure

└── AnonSend.git/
    ├── README.md
    ├── components.json
    ├── emails
    │   └── VerificationEmail.tsx
    ├── next.config.mjs
    ├── package-lock.json
    ├── package.json
    ├── postcss.config.mjs
    ├── public
    │   ├── next.svg
    │   └── vercel.svg
    ├── react-email-starter
    │   ├── emails
    │   ├── package.json
    │   └── readme.md
    ├── src
    │   ├── app
    │   ├── components
    │   ├── context
    │   ├── helpers
    │   ├── hooks
    │   ├── lib
    │   ├── messages.json
    │   ├── middleware.ts
    │   ├── model
    │   ├── schemas
    │   └── types
    ├── tailwind.config.ts
    └── tsconfig.json

---

🧩 Modules

.

File	Summary
next.config.mjs	Defines Next.js configuration for the repository. Facilitates custom settings for the Next.js framework. Supports enhancing the projects build, routing, and asset optimization.
package-lock.json	VerificationEmail.tsx**This code file, VerificationEmail.tsx`, plays a crucial role in the parent repositorys email verification functionality. It facilitates the generation and sending of verification emails to users. By leveraging this file, the parent repository ensures a seamless and secure verification process, enhancing user experience and platform security.
tsconfig.json	Facilitates TypeScript configuration for the Next.js project, enforcing strict typing rules, JSX preservation, and module resolutions. Enables seamless integration of React components by aliasing paths for improved code organization and maintainability within the codebase structure.
postcss.config.mjs	Enables PostCSS to load Tailwind CSS configuration for styling in the project.
package.json	Implements essential scripts for project development and deployment. Manages dependencies for core functionality, utilities, authentication, and UI components. Aligns with the projects tech stack and ensures seamless integration of key libraries and tools.
components.json	Defines component configurations including style, TypeScript support, Tailwind setup, and path aliases. Supports structured component development within the repository.
tailwind.config.ts	Defines Tailwind CSS configuration for styling across various project components leveraging custom color schemes, border radii, animations, and screen breakpoints. Enhances visual consistency and user experience within the application based on specified design variables.

src

File	Summary
middleware.ts	Implements middleware in middleware.ts for routing and authentication in the parent repository. Redirects users based on token presence and URL paths, enhancing user experience.
messages.json	Displays messages from users with timestamps in a JSON format for interface rendering within the AnonSend project. This file contributes critical content for message display functionality within the applications UI architecture.

src.types

File	Summary
next-auth.d.ts	Defines custom user schema for NextAuth session and JWT, expanding user fields beyond default. Enhances user object with properties like _id, isVerified, isAcceptingMessages, and username for broader functionality within the AnonSend repositorys architecture.
ApiResponse.ts	Defines API response structure with success status, message, and optional fields for message acceptance and an array of messages from the user model.

src.model

File	Summary
user.ts	Defines MongoDB schemas for messages, analytics, projects, and users with properties like content, positive/negative keywords, and verification codes. Ensures type safety and structure for user data with username, email, and password, including message and project associations.

src.lib

File	Summary
dbConnect.ts	Initiates and manages database connections to ensure performance optimization. Verifies existing connection to prevent strain and logs status updates for ease of monitoring. Core to maintaining database stability in the application architecture.
resend.ts	Enables email resending using the resend library with a specified API key.
utils.ts	Enhances CSS class handling by merging Tailwind CSS and clsx utility libraries, optimizing class concatenation and styling across components in the AnonSend.git repository.

src.schemas

File	Summary
acceptMessageSchema.ts	Defines a schema for accepting messages using the Zod library.
messageSchema.ts	Defines validation schema for accepting messages in the repository. Ensures message content is between 10 and 300 characters. Maintains data integrity for message inputs within the projects architecture.
signinSchema.ts	Validates user sign-in data before processing through Zod schema with identifier and password fields, ensuring password length requirement. Resides in signinSchema.ts within src/schemas, enhancing data integrity for authentication in the repository's architecture.
signupSchema.ts	Validates and ensures user input integrity for signup information. Employs Zod schema for username, email, and password fields, specifying length and format constraints. Facilitates seamless user registration process within the repositorys architecture.
verifySchema.ts	Defines verification schema with code validation rules using Zod for robust input handling.

src.components

File	Summary
delete-button.tsx	Implements a message card with delete confirmation. Handles displaying dialog, deleting messages via API, and providing user feedback. Prominently features a cancel button and confirmation action. The interaction ensures users are aware of irreversible deletion actions.
messageCard.tsx	Facilitates message deletion confirmation for users in a reusable UI card component. Integrates delete functionality with toast notifications and Axios requests, enhancing user experience and interaction. Time-stamps message creation and ensures secure message removal with a destructive variant.
Navbar.tsx	Implements Navbar with dynamic user authentication handling. Renders session-specific content and logout functionality. Enhances user experience by displaying personalized greeting and logout button. Facilitates seamless navigation between pages for authenticated and unauthenticated users within the application environment.

src.components.ui

File	Summary
toaster.tsx	Enables dynamic display of toast notifications in the UI with close functionality, driven by the toast provider and toast hook.
alert-dialog.tsx	Repository StructureThe code in src/components/ui/alert-dialog.tsx enhances user interaction by utilizing Radix UIs Alert Dialog component. It integrates seamlessly with the existing UI components in the repository. Key features include triggering alerts, handling dialog portals, and creating overlays for a smooth user experience. This code file focuses on improving the user interface through interactive alerts without disrupting the architectural integrity of the parent repository.
label.tsx	Defines Label component with style variants for UI consistency, leveraging Radix UI for enhanced accessibility. Integrates with class-variance-authority for dynamic class handling. Exports Label component for reuse in UI elements across the repository.
input.tsx	Enhances UI input component styling for better user experience and consistency across the application. It leverages Reacts capabilities to provide a customizable input element with various CSS classes for design flexibility.
toast.tsx	This code file, located at src/components/ui/toast.tsx, facilitates the integration of a toast notification system into the parent repositorys architecture. The main purpose is to provide a seamless and visually appealing way to display short-lived informational messages to users. By leveraging components from @radix-ui/react-toast" and other utilities, this code enhances the user experience by offering informative and easily dismissible notifications within the application interface.
separator.tsx	Implements a custom UI Separator component in the repositorys component structure. Renders a stylized visual separation element with configurable orientation, decorative styling, and dynamic class composition.
form.tsx	The src/components/ui/form.tsx file in the AnonSend.git repository is responsible for managing form elements and their states within the React application. It leverages the react-hook-form library for efficient form handling and provides a seamless user experience. By encapsulating form logic and leveraging components from the @radix-ui/react-label and @radix-ui/react-slot libraries, this code file enhances the overall user interface of the application. The integration of these technologies showcases a commitment to maintainable and user-friendly design patterns within the codebase.
button.tsx	Implements button variants for UI components using Class Variance Authority, enhancing visual styles and interactions. Integrates with React components to dynamically apply styles based on variant and size props, improving design consistency and flexibility within the repositorys architecture.
carousel.tsx	The carousel.tsx file in the src/components/ui directory is crucial for displaying a carousel interface within the web application. It utilizes the embla-carousel-react library to manage and render the carousel functionality. The file implements navigation arrows using components from lucide-react and customizes the carousel appearance with the Button component from the project's UI elements. This component enhances user experience by enabling seamless navigation through carousel items.🚀 Key Features:-Implements a user-friendly carousel interface.-Utilizes the embla-carousel-react library for carousel functionality.-Integrates navigation arrows using components from lucide-react.-Customizes carousel appearance with the Button component from the projects UI elements.
switch.tsx	Enhances UI by implementing a customizable React switch component for interactive user input. It leverages Radix UI for seamless integration, providing accessibility and styling features essential for a polished user experience in the web application.
card.tsx	Implements reusable UI card components with header, footer, title, description, and content sections styled for a consistent look and feel across the application. This promotes code reusability and enhances visual consistency in the user interface.

src.hooks

File

Summary

use-toast.ts

The use-toast.ts file in the src/hooks directory of the AnonSend.git repository provides a custom React hook for managing toast notifications. Inspired by the react-hot-toast library, this code implements functionality for displaying toast messages on the client side. Key features include setting a limit on the number of toasts, defining a delay for removing them, and defining types for toast props and actions. This hook enhances the user interface by enabling the efficient and user-friendly display of toast notifications within the application.

src.context

File	Summary
AuthProvider.tsx	Enables session management for authentication within the app using next-auth/react. Wraps children components with the SessionProvider to handle user sessions seamlessly.

src.helpers

File	Summary
sendVerificationEmail.ts	Sends verification emails using a reusable email function and a React component. Handles email sending errors gracefully, providing feedback to users. Informs user of successful or failed email delivery status.

src.app

File	Summary
layout.tsx	Defines global layout for True Feedback app, setting metadata, font, and incorporating AuthProvider and Toaster components.
globals.css	This code file, VerificationEmail.tsx, is a crucial component responsible for generating and sending verification emails in a React-based system. It plays a key role in enhancing user security and ensuring that only authenticated users can access specific features within the application. By handling the logic for creating and dispatching verification emails, this file significantly contributes to the systems overall authentication workflow.

src.app.(auth)

File	Summary
layout.tsx	Defines metadata and layout for Next.js app. Renders children within HTML body for consistent application structure.

src.app.(auth).sign-in

File

Summary

page.tsx

This code file in the src/app/auth/sign-in/page.tsx path facilitates user sign-in functionality within the AnonSend.git repository. It leverages various libraries like react-hook-form and next-auth, providing a seamless and secure sign-in experience for users. The file encapsulates form handling logic, form components, and integration with the next-auth library for authentication, essential components contributing to a robust authentication flow within the application.

src.app.(auth).sign-up

File	Summary
page.tsx	The code in src/app/(auth)/sign-up/page.tsx file focuses on handling user sign-up functionality within the parent repositorys architecture. It utilizes various React hooks and form management libraries to create a responsive and user-friendly sign-up page. The file emphasizes form validation, user interaction, and component reuse for a seamless sign-up experience.

src.app.(auth).verify.[username]

File	Summary
page.tsx	Implements a page for verifying user accounts by submitting a verification code. Utilizes form validation with zod, axios for API calls, and react-hook-form for form handling. Displays verification form and handles success/failure responses with toasts.

src.app.(app)

File	Summary
layout.tsx	Defines Root Layout component rendering Navbar and child components, ensuring consistent UI across app screens.
page.tsx	Showcases the anonymous feedback platforms home page with a dynamic carousel displaying encrypted messages. Emphasizes user anonymity and engages with feedback in a secure environment.

src.app.(app).dashboard

File

Summary

page.tsx

This code file in src/app/(app)/dashboard/page.tsx contributes to the parent repositorys architecture by providing a crucial dashboard page component. It utilizes various components like MessageCard, Button, Separator, and Switch to enhance user interaction. Additionally, it leverages hooks like useToast for displaying notifications and Message model for handling user messages. The code focuses on creating a seamless user experience and efficiently managing API responses through the ApiResponse type.

src.app.u.[username]

File	Summary
page.tsx	Enables user-specific page rendering for personalized experiences based on the username. Enhances user interaction and engagement within the repositorys broader application structure.

src.app.api.get-messages

File	Summary
route.ts	Implements route to get messages for authenticated user, using NextAuth session. Aggregates messages for specified user, handling authentication errors and database queries. Allows retrieval and display of messages.

src.app.api.accept-messages

File	Summary
route.ts	Implements POST and GET routes for accepting messages, updating the users status in the database. Handles authentication using NextAuth session, allowing users to manage message preferences securely within the application.

src.app.api.verify-code

File	Summary
route.ts	Handles user verification by checking the provided codes validity and expiration. Updates user verification status accordingly. Handles scenarios for code expiry, invalid codes, and errors.

src.app.api.suggest-messages

File	Summary
route.tsx	Generates engaging questions for an anonymous social messaging platform. Utilizes OpenAI to create thought-provoking prompts, fostering friendly interactions. Handles API errors and general exceptions for robust error management.

src.app.api.delete-message

File	Summary
route.tsx	Enables deletion of messages from the API route. Facilitates managing messages within the app, ensuring seamless user interaction. Integrates with the apps core functionalities for efficient message handling and moderation.

src.app.api.delete-message.[messageid]

File	Summary
route.tsx	Deletes a message from a users account after authentication, handling errors and status codes appropriately.

src.app.api.send-messages

File	Summary
route.ts	Handles sending messages to users, verifying user existence, and acceptance. Saves messages to the users model and returns appropriate responses based on the outcome. Critical for ensuring communication functionality within the apps architecture.

src.app.api.signup

File	Summary
route.ts	Implements user signup logic, including verification and email sending. Handles existing and new users, hashing passwords, and setting verification codes. Ensures unique usernames and emails. If successful, confirms the verification email was sent; if not, returns an error message.

src.app.api.auth.[...nextauth]

File	Summary
options.ts	Defines authentication options for Next.js with credential provider for login using email and password. Validates user credentials and enriches session token with user data for efficient access. Session strategy set to JWT with secret key. Customizes sign-in page path for NextAuth.
route.ts	Implements authentication routes using NextAuth, utilizing defined options from options.ts for the parent repository's user authentication architecture.

src.app.api.delete-all-messages

File	Summary
route.ts	Implements DELETE request to delete all user messages after authentication check. Handles database update, error logging, and response status codes. Key features include user authorization, database manipulation, and error handling.

src.app.api.check-username-unique

File	Summary
route.ts	Validates and checks username uniqueness in the database, ensuring no duplicate verified usernames exist. Handles query parameters, error responses, and database queries. Key for user registration flow in the repositorys backend API architecture.

emails

File	Summary
VerificationEmail.tsx	Generates a verification email with user-specific details for registration confirmation. Uses React components for structured layout and text rendering. Customizable fonts and styling enhance the emails visual appeal.

react-email-starter

File	Summary
package.json	Implements email build, dev, and export scripts for react-email components with dependencies defined in package.json. This file is part of the React Email Starter project in the parent repository, facilitating smooth development and export workflows for email components.

react-email-starter.emails

File	Summary
stripe-welcome.tsx	The StripeWelcomeEmail component in stripe-welcome.tsx within the react-email-starter directory generates a visually appealing HTML email template for welcoming users to Stripe. This component leverages various elements like Button, Container, Img, and Text from the @react-email/components library to construct a professional and engaging email layout. Additionally, it dynamically adjusts the baseUrl based on the environment to ensure correct link generation within the email content. This component plays a crucial role in enhancing user experience by delivering captivating emails to users interacting with the Stripe platform.
notion-magic-link.tsx	This code file in react-email-starter/emails/notion-magic-link.tsx is crucial for generating a Notion Magic Link email template within the parent repository. It defines the structure and content of the email, including body, headings, images, and links, using React components tailored for email rendering. This enables seamless integration of Notion Magic Link functionality into the email system of the parent repository, enhancing user communication and interaction.
plaid-verify-identity.tsx	The plaid-verify-identity.tsx" file in the react-email-starter directory of the repository is responsible for generating an email template used for verifying identity in the Plaid integration flow. It utilizes React components for building the email structure, including headers, sections, images, text, and links. This file plays a critical role in enhancing the user experience by providing a visually appealing and informative email layout for the verification process within the application.
vercel-invite-user.tsx	The vercel-invite-user.tsx file within the react-email-starter/emails directory is responsible for generating an email template for inviting users to a project on Vercel. This template includes personalized elements such as the users name, image, and the name of the person who invited them. The file utilizes React components for building the email layout and styling, ensuring a visually appealing and user-friendly email experience within the parent repository's architecture.

---

🚀 Getting Started

🔖 Prerequisites

TypeScript: version x.y.z

📦 Installation

Build the project from source:

1. Clone the AnonSend.git repository:

❯ git clone https://github.com/LEVIII007/AnonSend.git

2. Navigate to the project directory:

❯ cd AnonSend.git

3. Install the required dependencies:

❯ npm install

🤖 Usage

To run the project, execute the following command:

❯ npm run build && node dist/main.js

🧪 Tests

Execute the test suite using the following command:

❯ npm test

---

🤝 Contributing

Contributions are welcome! Here are several ways you can contribute:

• Report Issues: Submit bugs found or log feature requests for the AnonSend.git project.
• Submit Pull Requests: Review open PRs, and submit your own PRs.
• Join the Discussions: Share your insights, provide feedback, or ask questions.

Contributing Guidelines

1. Fork the Repository: Start by forking the project repository to your github account.
2. Clone Locally: Clone the forked repository to your local machine using a git client.

   git clone https://github.com/LEVIII007/AnonSend.git

3. Create a New Branch: Always work on a new branch, giving it a descriptive name.

   git checkout -b new-feature-x

4. Make Your Changes: Develop and test your changes locally.
5. Commit Your Changes: Commit with a clear message describing your updates.

   git commit -m 'Implemented new feature x.'

6. Push to github: Push the changes to your forked repository.

   git push origin new-feature-x

7. Submit a Pull Request: Create a PR against the original project repository. Clearly describe the changes and their motivations.
8. Review: Once your PR is reviewed and approved, it will be merged into the main branch. Congratulations on your contribution!

Contributor Graph

---

🙌 Acknowledgments

• List any resources, contributors, inspiration, etc. here.

---