Hi, I'm Akash Kumar Ram! 👋

Welcome to my GitHub! I'm a Frontend Developer skilled in JavaScript, TypeScript, Tailwind CSS, ReactJS, Next.js, Docker, and System Design. Let's build innovative web solutions together!

🚀 About Me

As a skilled Frontend Developer, I specialize in JavaScript, TypeScript, Tailwind CSS, ReactJS, Next.js, Docker, and System Design. With a passion for crafting intuitive user experiences and a keen eye for detail, I bring innovative solutions to the forefront of web development. Let's collaborate to bring your projects to life!

🔗 Links

Drawer - Docs and Diagrams for Engineering Teams

Welcome to Drawer, your go-to platform for collaborative documentation and diagramming! With seamless login options via Kinde, and powered by TypeScript, Tailwind CSS, Shadcn-ui, and Next.js 14, Drawer simplifies the process of creating and sharing engineering documentation. Effortlessly craft documents and diagrams using our integrated text editor and rich drawing tool, all backed by the reliability of Convex database. Start documenting your ideas with Drawer today!"

Screenshots

Demo

https://eraser-seven.vercel.app

Features

• Seamless Authentication: Login and register with ease using Google and Facebook authentication via Kinde, ensuring hassle-free access to your documentation.

• Rich Text Editing: Create comprehensive documentation effortlessly with our integrated rich text editor, offering a wide range of formatting options for text and content.

• Diagram Drawing Tool: Utilize our fully customizable drawing tool to create diagrams seamlessly within your documentation, enhancing visualization and clarity for complex concepts and processes.

• Dynamic Diagramming: Visualize your ideas effectively with our fully customizable diagram drawing tool, allowing you to create and customize diagrams to suit your documentation needs.

• Collaborative Workspace: Collaborate seamlessly with your team members by sharing and editing documents in real-time, fostering teamwork and productivity.

• Convex Database Integration: All your project information, including documentation and drawing vectors, is securely stored in Convex database, ensuring data reliability and accessibility.

• Tailored User Experience: Enjoy a sleek and intuitive user interface powered by Tailwind CSS and Shadcn-ui, providing a seamless experience for creating, editing, and sharing documentation.

• Next.js 14 Compatibility: Leveraging the latest advancements in Next.js 14, Drawer delivers enhanced performance and scalability, ensuring a smooth and responsive user experience for all users.

• Efficient Organization: Organize your documentation effectively with folders and tags, making it easy to navigate and locate specific documents when needed.

• Real-time Updates: Stay up-to-date with real-time notifications for document edits, ensuring you never miss important changes or updates within your team.

• Export and Share: Export your diagrams in various formats and share them effortlessly with team members or external stakeholders, facilitating seamless communication and collaboration.

• Accessibility and Security: Prioritize accessibility and security with robust data encryption and compliance measures, ensuring your sensitive information remains protected at all times.

Tech Stack

Client: TypeScript , Tailwind CSS , Shadcn-Ui , Next.js 14 , Kinde-Auth

Server: Convex

Installation

Install my-project with npm

  git clone <https://github.com/AkashKumarRam/Eraser.git>

  cd eraser

  npm install

Environment Variables

To run this project, you will need to add the following environment variables to your .env.local file

KINDE_CLIENT_ID

KINDE_CLIENT_SECRET

KINDE_ISSUER_URL

KINDE_SITE_URL

KINDE_POST_LOGOUT_REDIRECT_URL

KINDE_POST_LOGIN_REDIRECT_URL

CONVEX_DEPLOYMENT

NEXT_PUBLIC_CONVEX_URL

Run Locally

Clone the project

 git clone https://github.com/AkashKumarRam/Eraser.git

Go to the project directory

  cd codepen

Install dependencies

  npm install

Start the server

  npm run dev

Start the Convex

  npx run convex

Deployment

To deploy this project run

  npm run build

🛠 Skills

• JavaScript ⚡️
• TypeScript 📘
• Tailwind CSS 💻
• ReactJS ⚛️
• Redux Toolkit 💡
• React Query 🔍
• Next.js 🚀
• Docker 🐳
• System Design ⚙️

Feedback

If you have any feedback, please reach out to us at LinkedIn

FAQ

What if I don't run this project?

Connect with me on LinkedIn

Support

For support, Dm me on LinkedIn

Lessons Learned

• Kinde Authentication Mastery: Mastering the implementation of authentication using Kinde has provided invaluable insights into the seamless integration of social login options, enhancing user accessibility and convenience.

• Convex Database Utilization: Learning how to effectively utilize Convex database for storing and managing project information has deepened understanding of data storage solutions and scalability considerations in building robust applications.

• Integration of Rich Text Editor: Integrating a rich text editor into the project has highlighted the importance of providing users with versatile content creation tools, enabling them to create comprehensive documentation with ease and flexibility.

• Integration of Diagram Tool: Incorporating a diagram drawing tool into the platform has underscored the significance of visual representation in conveying complex concepts and facilitating clearer communication among team members.

Related

Here are some related projects

CodePen - Realtime Online Code Editor

Airbnb | Holiday rentals, cabins, beach houses & more

Authors

• @Akash Kumar Ram