Frontend Developer

projects

hashnode

github

Arjun R A  • Peerlist

Aries - Technical Ideation Tool This is all in one technical ideation tool including markdown editor, canvas and diagram builder. Features<ul><li>Create new team</li><li>Create new file </li><li>Archive / Unarchive file</li><li>Delete file</li><li>Search functionality </li><li>Edit / Save Document</li><li>Edit / Save Canvas Diagram </li><li>Kinde Authentication </li><li>Next JS App Router</li><li>Server actions </li><li>Metadata </li><li>Search Engine Optimization </li></ul>Pages <ul><li>Home Page</li><li>Dashboard page </li><li>Archive page</li><li>Create new team page </li><li>Workspace page </li></ul>Tech Stack <ul><li>Framework : Next JS</li><li>Component library : Shadcn </li><li>State Management : Zustand </li><li>CSS Framework : Tailwind CSS </li><li>Editor : Editorjs</li><li>Whiteboard tool : Excalidraw </li><li>Icons : Lucide React </li><li>Forms : React-Hook-Form</li><li>ORM : Prisma with PostgreSQL </li><li>Data fetching library : React Query </li><li>- TS Schema Validation : Zod</li><li>- Hosting Service : Vercel </li><li>- Authentication : Kinde</li></ul>

Aries

Easy-Buy - E-commerce Web Application[Easy-Buy](<a target="_blank" rel="noopener noreferrer nofollow" class="text-green-text rich-link break-all link-break" href="https://easy-buy-ecommerce.onrender.com/">https://easy-buy-ecommerce.onrender.com/</a>)This is an e-commerce store providing products in categories like electronics, jewelry, men's and women's clothing.Features<ul><li>Home page with pagination feature to view and select any product.</li><li>Sort products by price range.</li><li>Filter products by category, rating, and pricing.</li><li>Wishlist Management</li><li>Cartlist Management </li><li>Address Management</li><li>Coupon Management</li><li>Order Summary</li><li>Search bar feature to look for a particular product.</li><li>Payment system using Razorpay</li><li>JWT Authentication</li></ul>Pages<ul><li>Home Page</li><li>Product listing page</li><li>Cart list page</li><li>Wish list page</li><li>Single Product page</li><li>Checkout page</li><li>Profile page with order summary</li><li>Payment Success page</li><li>Sign in and Sign out page</li></ul>Tech Stack<ul><li>Backend: [Easy-Buy-API](<a target="_blank" rel="noopener noreferrer nofollow" class="text-green-text rich-link break-all link-break" href="https://easy-buy-api.onrender.com/">https://easy-buy-api.onrender.com/</a>)</li><li>Project Builder: Vite</li><li>Languages used: React, TypeScript</li><li>State Management: Redux Toolkit</li><li>CSS Framework: Tailwind CSS</li><li>HTTP Client : Axios</li><li>Icons: Bootstrap icons</li><li>Routing: React Router v6</li><li>Forms: React-Hook-Form</li><li>Payment System: Razorpay</li><li>Hosting Service: Render</li></ul>

Easy Buy

Pet Club - Social Media<a target="_blank" rel="noopener noreferrer nofollow" class="text-green-text rich-link break-all link-break" href="https://pet-club.vercel.app/">Pet-Club</a> - A Social Media Web App. Pet-Club is the place you wish you joined earlier. Join the club full of animal lovers like you. You can build your own network with each other and share about your life with your beloved pets.Features<ul><li>Light Mode and Dark Mode</li><li>Create, edit and delete posts</li><li>Create, edit and delete comments on posts</li><li>Sort posts by latest,oldest and trending</li><li>Like/dislike post</li><li>Add/delete post to/from the bookmark page</li><li>User profile</li><li>Edit user profile</li><li>Follow/unfollow user</li><li>Authentication</li></ul>Pages<ul><li>Home page</li><li>Explore page</li><li>Bookmarks page</li><li>Single post page</li><li>User profile page</li><li>Login, Signup page</li></ul>Built using<ul><li>ReactJS</li><li>React Router v6</li><li>Redux Toolkit</li><li>Tailwind CSS</li><li>MockBee (For Backend)</li><li>React Toastify</li></ul>

Pet - Club

<h3 class="rich-heading">Pet - TV</h3><a target="_blank" rel="noopener noreferrer nofollow" class="text-green-text rich-link break-all link-break" href="https://pet-tv-react.vercel.app/">Pet-TV</a> One stop video library App for pet lovers.Features<ul><li>Video Listing page</li><li>Like/dislike a video</li><li>Watchlater Management</li><li>History Management</li><li>Filter videos by category</li><li>Search videos</li><li>Playlist Management</li><li>Authentication</li></ul>Pages<ul><li>Home page</li><li>Explore page</li><li>Playlist page</li><li>Liked Videos page</li><li>Watchlater page</li><li>History page</li><li>Single Video page</li><li>Login, Signup page</li></ul>Tech Stack<ul><li>ReactJS</li><li>React Router v6</li><li>React Context API and useReducer</li><li>React Player</li><li><a target="_blank" rel="noopener noreferrer nofollow" class="text-green-text rich-link break-all link-break" href="https://its-aqua-ui.netlify.app/">Aqua UI</a> - CSS Component Library</li><li>MockBee (For Backend)</li><li>React Toastify</li></ul>

Pet TV

<h3 class="rich-heading">Just Note</h3><a target="_blank" rel="noopener noreferrer nofollow" class="text-green-text rich-link break-all link-break" href="https://note-app-arjunjunna.vercel.app/">Just Note</a> - A quick &amp; easy app to take notes. Packed with many features. Customize, organize and carry it anywhere with you.Features<ul><li>Add a note</li><li>Edit a note</li><li>Archive/Unarchive a Note</li><li>Delete a Note</li><li>Search for a note</li><li>Add/update tag for a note</li><li>Add/update priority for a note</li><li>Add/update the color of the note</li><li>Filter notes by tags, priority, and time.</li><li>Rich Text Editor</li><li>Authentication</li></ul>Pages<ul><li>Archive page</li><li>Note page</li><li>Trash page</li><li>Login, Signup page</li></ul>Tech Stack<ul><li>ReactJS</li><li>React Router v6</li><li>React Context API and useReducer</li><li>Rich Text Editor</li><li><a target="_blank" rel="noopener noreferrer nofollow" class="text-green-text rich-link break-all link-break" href="https://its-aqua-ui.netlify.app/">Aqua UI</a> - CSS Component Library</li><li>MockBee (For Backend)</li><li>React Toastify</li></ul>

Just Note

<h3 class="rich-heading">Petmate - Ecommerce Store</h3><a target="_blank" rel="noopener noreferrer nofollow" class="text-green-text rich-link break-all link-break" href="https://petmate-ecommerce-react.vercel.app/">Petmate</a> The web app is an e-commerce platform for purchasing food and toys for pets. It offers a wide selection of products in various categories with the best deals. Easy to use and quick to checkout.Features<ul><li>Landing page with a list of featured categories and products</li><li>Sort products by price.</li><li>Filter products by availability, category, rating, and prices.</li><li>Wishlist Management</li><li>Cartlist Management</li><li>Search for a particular product</li><li>Authentication</li></ul>Pages<ul><li>Home Page</li><li>Product listing page</li><li>Cart list page</li><li>Wish list page</li><li>Login, Signup page</li></ul>Tech Stack<ul><li>ReactJS</li><li>React Router v6</li><li>React Context API and useReducer</li><li>MockBee (For Backend)</li><li>React Toastify</li></ul>

Petmate Ecommerce

<h3 class="rich-heading">Aqua UI</h3>Aqua UI is a CSS component library. It is integrated with pre-defined styled classes. It is user-friendly and customizable. You can quickly build your project with ease because Aqua UI has already taken care of your designs.<h3 class="rich-heading">Components</h3><ul><li><a target="_blank" rel="noopener noreferrer nofollow" class="text-green-text rich-link break-all link-break" href="https://its-aqua-ui.netlify.app/components/avatar/avatar.html">Avatar</a></li><li><a target="_blank" rel="noopener noreferrer nofollow" class="text-green-text rich-link break-all link-break" href="https://its-aqua-ui.netlify.app/components/alert/alert.html">Alert</a></li><li><a target="_blank" rel="noopener noreferrer nofollow" class="text-green-text rich-link break-all link-break" href="https://its-aqua-ui.netlify.app/components/badge/badge.html">Badge</a></li><li><a target="_blank" rel="noopener noreferrer nofollow" class="text-green-text rich-link break-all link-break" href="https://its-aqua-ui.netlify.app/components/button/button.html">Button</a></li><li><a target="_blank" rel="noopener noreferrer nofollow" class="text-green-text rich-link break-all link-break" href="https://its-aqua-ui.netlify.app/components/cards/cards.html">Card</a></li><li><a target="_blank" rel="noopener noreferrer nofollow" class="text-green-text rich-link break-all link-break" href="https://its-aqua-ui.netlify.app/components/images/images.html">Image</a></li><li><a target="_blank" rel="noopener noreferrer nofollow" class="text-green-text rich-link break-all link-break" href="https://its-aqua-ui.netlify.app/components/input/input.html">Input</a></li><li><a target="_blank" rel="noopener noreferrer nofollow" class="text-green-text rich-link break-all link-break" href="https://its-aqua-ui.netlify.app/components/navigation/navigation.html">Navigation</a></li><li><a target="_blank" rel="noopener noreferrer nofollow" class="text-green-text rich-link break-all link-break" href="https://its-aqua-ui.netlify.app/components/rating/rating.html">Rating</a></li><li><a target="_blank" rel="noopener noreferrer nofollow" class="text-green-text rich-link break-all link-break" href="https://its-aqua-ui.netlify.app/components/modal/modal.html">Modal</a></li><li><a target="_blank" rel="noopener noreferrer nofollow" class="text-green-text rich-link break-all link-break" href="https://its-aqua-ui.netlify.app/components/typography/typography.html">Typography</a></li><li><a target="_blank" rel="noopener noreferrer nofollow" class="text-green-text rich-link break-all link-break" href="https://its-aqua-ui.netlify.app/components/list/list.html">List</a></li><li><a target="_blank" rel="noopener noreferrer nofollow" class="text-green-text rich-link break-all link-break" href="https://its-aqua-ui.netlify.app/components/toast/toast.html">Toast</a></li><li><a target="_blank" rel="noopener noreferrer nofollow" class="text-green-text rich-link break-all link-break" href="https://its-aqua-ui.netlify.app/components/grid/grid.html">Grid</a></li><li><a target="_blank" rel="noopener noreferrer nofollow" class="text-green-text rich-link break-all link-break" href="https://its-aqua-ui.netlify.app/components/slider/slider.html">Slider</a></li></ul>