Frontend Engineer | Open Source Contributer | Technical Writer | neoG'23

github

hashnode

Pranita Fulsundar  • Peerlist

Features:<ul><li>Task Board Layout: Organized into four columns - Ready, In Progress, Testing, and Done.</li><li>Drag-and-Drop: Intuitive drag-and-drop functionality for task management.</li><li>Task Cards: Each task displayed within its respective group with essential details like name, assignee, priority, etc.</li><li>Task Metrics: Visual representation of task distribution in each stage, including priority breakdowns (Urgent, High, Medium, Low).</li><li>Add/Update/Delete Tasks: Functionality to manage tasks efficiently.</li><li>Search Functionality: Enables searching by task name across all groups.</li><li>Filters: Filtering options for Start/End dates, assignees, and task severity.</li><li>Unique Badges: Task badges based on severity levels (High/Medium/Low).</li><li>Light and Dark Mode: Personalized theme preferences for users.</li></ul>Technology Used:<ul><li>React JS: Frontend framework for dynamic UI.</li><li>React Context API + useReducer: State management for React components.</li><li>React Router v6: Handles routing within the application.</li><li>Tailwind CSS: Custom styling for a modern and responsive interface.</li><li>React-dnd: Drag-and-drop library for React.</li><li>Chart.js: Library for creating interactive charts to display task metrics.</li><li>React Icons: Utilized for iconography.</li><li>ExpressJS + MongoDB for backend: Backend server and database for data management.</li></ul>This organizational tool, Organizely, provides an intuitive and visually interactive task board, empowering users to efficiently manage tasks, track progress across stages, and filter and sort tasks based on various criteria. With a blend of modern UI elements and seamless functionality, it offers a streamlined task management experience.

Organizely

Pages and Features:<ul><li>Home Page:<ul><li>Displays posts from followed users.</li><li>Provides user suggestions for potential follows.</li><li>Allows users to follow others.</li><li>Like/Unlike posts.</li><li>Add/Remove bookmarks on posts.</li><li>Comment on posts.</li><li>Create/Edit posts with images and emojis.</li><li>Delete own posts.</li><li>Share post links.</li><li>Sort posts by Latest/Trending/Oldest.</li><li>Implements infinite scroll for seamless browsing.</li></ul></li></ul><ul><li>Explore Page:<ul><li>Showcases all posts from latest to oldest.</li><li>Implements infinite scroll for effortless exploration.</li></ul></li></ul><ul><li>Bookmarks Page:<ul><li>Displays a list of user-bookmarked posts.</li><li>Allows removing posts from bookmarks.</li><li>Like/Comment on bookmarked posts.</li></ul></li></ul><ul><li>Profile Page:<ul><li>Enables users to edit their profiles, including image and avatar uploads.</li><li>Edit background cover photo.</li><li>Follow/Unfollow users.</li><li>View followers/following lists.</li><li>Logout functionality.</li><li>Lists all posts by the user.</li></ul></li></ul><ul><li>Single Post Page:<ul><li>Like/Unlike posts.</li><li>Add/Remove bookmarks on posts.</li><li>Comment on posts.</li><li>Share post links.</li><li>Edit/Delete posts.</li><li>View users who liked the post.</li><li>View comments and edit/delete own comments.</li></ul></li></ul><ul><li>Other Features:<ul><li>Authentication with login/signup functionality.</li><li>Video upload capabilities.</li><li>404 Error Page for smooth navigation.</li><li>Dark mode for user preference.</li><li>User search functionality.</li><li>Toast notifications and loaders for user actions.</li><li>Responsiveness across devices.</li></ul></li></ul>Built with:<ul><li>React JS: Frontend framework for dynamic UI.</li><li>React Context API + useReducer: State management for React components.</li><li>React Router v6: Handles navigation within the app.</li><li>Tailwind CSS: Custom styling for a unique interface.</li><li>Material UI components: Integration for UI consistency.</li><li>mockBee for backend: Backend service for data management.</li><li>React Icons: Utilized for iconography.</li><li>React Hot Toast: Provides toast notifications for user actions.</li></ul>This social media platform encompasses a range of user-centric features, enabling seamless interaction, content sharing, and user engagement while maintaining a visually appealing and responsive interface.

Buzzbird

Plantique E-Commerce Project Overview:Features:<ul><li>Landing Page: Showcases featured categories for easy navigation.</li><li>Product Listing Page: Displays a comprehensive list of available products.</li><li>Filter &amp; Sort Functionality: Allows users to refine product searches.</li><li>Search Functionality: Enables users to find specific products quickly.</li><li>Individual Product Page: Detailed view for each product with specifications.</li><li>Cart Management: Add, remove, update product quantities in the cart.</li><li>Wishlist Management: Add, remove products from the wishlist.</li><li>Address Management: Users can add, update, and delete delivery addresses.</li><li>Order Management: Handles the complete lifecycle of orders.</li><li>Checkout Page: Streamlined process for finalizing purchases.</li><li>Payment Gateway Integration: Seamlessly integrates Razorpay for secure payments.</li><li>Authentication: User signup, login, and logout functionality.</li><li>Error Page: Provides user-friendly error messages for smooth navigation.</li><li>Toast &amp; Loaders: Notifications for user actions and page loading indicators.</li><li>Responsiveness: Ensures compatibility across various devices.</li></ul>Built with:<ul><li>React JS: Frontend framework for dynamic and interactive UI.</li><li>React Context API + useReducer: State management for React components.</li><li>React Router v6: Navigation and routing within the React application.</li><li>Vanilla CSS: Custom styling for a unique look and feel.</li><li>MUI Icons: Integration for iconography in the user interface.</li><li>Razorpay Payment Gateway: Secure payment processing.</li><li>React Hot Toast: Provides toast notifications for user actions.</li></ul>Backend Overview:<ul><li>Functionalities:<ul><li>Products and Categories: Retrieves all products and categories.</li><li>Authentication: JWT-based login/signup, encrypted password storage.</li><li>Wishlist and Cart Management: Manages products in wishlist and cart.</li><li>Address Management: CRUD operations for user addresses.</li></ul></li></ul>Tech Stack:<ul><li>ExpressJS: Backend web application framework.</li><li>MongoDB + Mongoose: Database management and modeling.</li><li>bcrypt: Used for password encryption.</li><li>jsonwebtoken: Creates and verifies JWT tokens.</li><li>cors: Enables secure cross-origin requests.</li><li>helmet: Adds extra security to HTTP headers.</li></ul>This e-commerce platform, Plantique, blends a user-friendly frontend with a robust backend, ensuring a seamless shopping experience while maintaining security and efficient management of products, orders, and user data.