Software Engineer(Frontend) @kula. Prev - Cognizant

projects

github

devto

productHunt

youtube

Manikandan S  • Peerlist

GitHub Wrapped provides a personalised summary of your GitHub activity for the year, offering insights into your development habits and accomplishments. After entering your GitHub username, it generates a visually appealing dashboard with the following features:<ol><li>Monthly Contribution Chart:<ul><li>A detailed graph showing the number of contributions (commits, PRs, issues, etc.) made each month of the year.</li><li>Helps users visualize their productivity trends throughout the year, identifying high-activity and low-activity periods.</li></ul></li><li>Overall Stats<ul><li>Total Contributions: A cumulative tally of all contributions made during the year, showcasing the user's dedication to their projects and open source.</li><li>Total Active Days: The count of unique days when the user actively contributed to GitHub repositories, highlighting consistency.</li><li>Longest Streak: A measure of the user's perseverance, showing the highest number of consecutive days with contributions.</li></ul></li><li>Activity Stats:<ul><li>Most Active Day: The specific date with the highest number of contributions, signifying peak productivity.</li><li>Most Active Weekday: Indicates the day of the week (e.g., Wednesday or Friday) when the user typically contributes the most.</li><li>Most Active Month: Spotlights the month when the user was most active, allowing for a deeper dive into seasonal patterns of work.</li></ul></li><li>Weekly Contribution Chart:<ul><li>A bar chart summarising average contributions across each day of the week, helping users uncover their preferred working patterns or productivity rhythms.</li><li>Encourages users to balance their schedule or celebrate their dedication during specific days.</li></ul></li></ol>This tool is an engaging way to reflect on your coding journey, showcasing your dedication and productivity throughout the year. It also makes for a great shareable summary on social media, celebrating your achievements as a Open-source enthusiasts, professional developers, hobbyist coders, and GitHub users seeking to reflect on and share their yearly achievements.

Github wrapped

Fastart is a component library that allows you to build apps faster by using simple components. Fastart currently has 13-14 basic components which are essential for web development.

Build Using: HTML, CSS, and JavascriptComponentsFastart provide following Components<ul><li><a target="_blank" rel="noopener noreferrer nofollow" class="text-green-text rich-link break-all link-break text-green-text rich-link break-all link-break" href="https://fastart.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 text-green-text rich-link break-all link-break" href="https://fastart.netlify.app/components/avatar/avatar.html">Avatar</a><ul><li>Circular avatar</li><li>Square avatar</li></ul></li><li><a target="_blank" rel="noopener noreferrer nofollow" class="text-green-text rich-link break-all link-break text-green-text rich-link break-all link-break" href="https://fastart.netlify.app/components/badge/badge.html">Badge</a><ul><li>Icon with badge</li><li>Status badge</li></ul></li><li><a target="_blank" rel="noopener noreferrer nofollow" class="text-green-text rich-link break-all link-break text-green-text rich-link break-all link-break" href="https://fastart.netlify.app/components/button/button.html">Button</a><ul><li>Solid button</li><li>Outline button</li><li>Styled links</li><li>Icon button</li><li>Floating action button</li></ul></li><li><a target="_blank" rel="noopener noreferrer nofollow" class="text-green-text rich-link break-all link-break text-green-text rich-link break-all link-break" href="https://fastart.netlify.app/components/card/card.html">Card</a><ul><li>Ecom card</li><li>Ecom card with favourite badge</li><li>Ecom with dismiss badge</li><li>Ecom with new and sold out text bage</li><li>Card with image overlay</li><li>Text only card</li></ul></li><li><a target="_blank" rel="noopener noreferrer nofollow" class="text-green-text rich-link break-all link-break text-green-text rich-link break-all link-break" href="https://fastart.netlify.app/components/grid/grid.html">Grid</a><ul><li>Grid of two columns</li><li>Grid of three columns</li></ul></li><li><a target="_blank" rel="noopener noreferrer nofollow" class="text-green-text rich-link break-all link-break text-green-text rich-link break-all link-break" href="https://fastart.netlify.app/components/image/image.html">Image</a><ul><li>Responsive image</li><li>Round image</li></ul></li><li><a target="_blank" rel="noopener noreferrer nofollow" class="text-green-text rich-link break-all link-break text-green-text rich-link break-all link-break" href="https://fastart.netlify.app/components/input/input.html">Input</a><ul><li>Standard input</li><li>Error input with error message</li><li>Radio button and checkbox</li></ul></li><li><a target="_blank" rel="noopener noreferrer nofollow" class="text-green-text rich-link break-all link-break text-green-text rich-link break-all link-break" href="https://fastart.netlify.app/components/list/list.html">List</a><ul><li>Spaced list</li><li>Stacked list</li><li>Styled stacked list</li></ul></li><li><a target="_blank" rel="noopener noreferrer nofollow" class="text-green-text rich-link break-all link-break text-green-text rich-link break-all link-break" href="https://fastart.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 text-green-text rich-link break-all link-break" href="https://fastart.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 text-green-text rich-link break-all link-break" href="https://fastart.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 text-green-text rich-link break-all link-break" href="https://fastart.netlify.app/components/slider/slider.html">Slider</a></li><li><a target="_blank" rel="noopener noreferrer nofollow" class="text-green-text rich-link break-all link-break text-green-text rich-link break-all link-break" href="https://fastart.netlify.app/components/text/text.html">Text utils</a><ul><li>Heading style</li><li>Paragraph style</li></ul></li><li><a target="_blank" rel="noopener noreferrer nofollow" class="text-green-text rich-link break-all link-break text-green-text rich-link break-all link-break" href="https://fastart.netlify.app/components/toast/toast.html">Toast</a></li></ul>

Fastart - component library

Finflix is a video library for finance content. Start your basic financial knowledge with finflix and keep growing your wealth.
Build with react and mock API.

FeaturesLogin<ul><li>User able to login by entering email and password</li><li>User can use guest credentials to login</li><li>Form validation is done for login fields</li></ul>Sign Up<ul><li>User able to create account and signup for the site</li><li>Form validation is done for signup fields</li></ul>Explore page<ul><li>It list all the videos provided by finflix</li><li>Filter videos by category using the category chips.</li><li>search for video using the search field</li></ul>Like Feature<ul><li>User can like/Remove like of the video in single video page</li><li>Logged in user only can like the video</li><li>Liked videos page shows all the liked videos and option to remove it from liked.</li></ul>Watch later Feature<ul><li>User can add/remove a video from Watch later in single video page</li><li>Logged in user only can watchlater the video</li><li>User can also add to watch later from video listing page</li><li>Watch later videos page shows all the watch later videos and option to remove it from watch later.</li></ul>Playlist Feature<ul><li>User can add/remove a video from playlist in single video page</li><li>Logged in user only can add videos in playlist.</li><li>User can also add to playlist from video listing page</li><li>User can create a playlist using the create playlist modal</li><li>Playlisted videos page shows all the playlist created and option to delete playlist.</li><li>Each playlist has single page for it where it contains all the video added to that particular page and option to delete it.</li></ul>History Feature<ul><li>When the user clicks the video from video listing page it is added to the history.</li><li>History page shows all the videos that the user has watched.</li><li>History page has option to remove particular video from history and clear all the videos from history</li></ul>Single Video Page<ul><li>Single Video page has the video player from video.</li><li>Single video page has option to like, watch later and add to playlist</li><li>Single video page also shows the Recommended videos and more videos from the same creator.</li></ul>Profile page<ul><li>User profile page with email id of the user</li><li>Button to logout from the app.</li></ul>Private Routes<ul><li>All the user specific routes are made as private routes and can be accessed only after login</li></ul>Loaders and Toasts<ul><li>Loaders and toast is provided as the acknowledgment to the users</li></ul>Backend<ul><li>As of now this app uses mock API as the backend, Hence the data can't be persisted on refresh. Will try to add backend in the future.</li></ul>

Finflix - Video Library

JsTees is an Ecom app for those who love T-shirts and Javascript.

Build using - React, fastart, React router.

FeaturesLogin<ul><li>User able to login by entering email and password</li><li>User can use guest credentials to login</li><li>Form validation is done for login fields</li></ul>Sign Up<ul><li>User able to create account and signup for the site</li><li>Form validation is done for signup fields</li></ul>Home page<ul><li>Landing page with list of featured categories of Tees</li><li>Clicking on categories will take to product listing page with selected category.</li></ul>Product listing page<ul><li>Product listing page with list of products card and filter</li><li>Product card has button to wishlist and add to cart</li><li>Clicking on each item on product page takes to single product page</li></ul>Filters<ul><li>Filter by price - Range slider to filter the products based on price range.</li><li>Filter by category - Filter based on available categories</li><li>Filter by rating - Filter the products based on ratings</li><li>Sort by price - Sort the products based on price</li></ul>Wishlist page<ul><li>Wishlist page shows the list of wishlisted products by the user</li><li>Remove from wishlist and add the product to cart</li></ul>Cart page<ul><li>Cart page shows the list of products added to the cart</li><li>Price card shows the actual price, discounted price, delivery charges and total price</li><li>Can increase/decrease the quantity for each product</li><li>Remove item from cart</li><li>Move the product to wishlist from cart</li></ul>Private Routes<ul><li>To wishlist and add items to cart you should be logged in.</li></ul>Single product page<ul><li>Page for each product with detailed description about the product</li><li>Button to wishlist and add to cart</li></ul>Profile page<ul><li>User profile page with name and email id of the user</li><li>Button to logout from the app.</li></ul>Search<ul><li>Search bar in the navbar present for all the pages except auth pages</li><li>Type the product name in search bar will show the list of products in drawer clicking on the that will take to the detailed product page</li></ul>Loaders and Toasts<ul><li>Loaders and toast is provided as the acknowledgment to the users</li></ul>Coupon<ul><li>User can apply the coupon on cart page</li><li>Coupons will be shown in the popup based on cart value</li><li>User can select any one coupon from the popup</li><li>User can also remove the coupon and add other coupons</li></ul>Checkout Page<ul><li>Checkout page shows summary of the product and delevering address</li><li>Button to proceed payment.</li></ul>Payment Integration<ul><li>Clicking on proceed to pay button on checkout page will open razor pay test payment</li><li>After the successfull payment showing the message in toast, clearing the cart and redirecting to Home</li></ul>As of now this app uses mock API as the backend, Hence the data can't be persisted on refresh. Will try to add backend in the future.<hr>

JsTees - Ecommerce App

KeyNotes is a digital Notes manager. Manage your notes and workflow in a modern way and boost your efficiency without any effort.
Build using - React and firebase

FeaturesLogin<ul><li>User able to login by entering email and password</li><li>User can use guest credentials to login</li><li>Form validation is done for login fields</li></ul>Sign Up<ul><li>User able to create account and signup for the site</li><li>Form validation is done for signup fields</li></ul>Landing page<ul><li>Landing page with Buttons to go to login or signup</li></ul>Notes Home page<ul><li>It list all the Notes stored by the user other than archive and trash notes</li><li>Has a button to create Note, edit Note and Add labels</li></ul>Create Note<ul><li>User can click create Note button and on Form will appear in the modal</li><li>Where they can give the Title and description for a note</li><li>User can also choose the priority, pin, label and color for the Note</li></ul>Rich Text Editor<ul><li>Rich text Editor is used for Notes container.</li><li>So You apply the basic styling for the Note from the editor</li></ul>Edit Note<ul><li>User can click edit icon button on each note to edit the particular note.</li><li>It will be opened in the same editor and form</li><li>All the functionalities such as Title, notes, priority, pin, label and color for the Note can be Edited</li></ul>Pin Feature<ul><li>Pin Feature is used to pin the important notes and it will appear at the top</li><li>pin/unpin can be done both on while creating the note and after the creation also</li></ul>Color change<ul><li>User can change the color of each notes based on the provided colors</li><li>color change can be done both on while creating the note and after the creation also</li></ul>Priority<ul><li>Priority can be given to notes as High, Medium and Low</li><li>color change can be done both on while creating the note and after the creation also</li></ul>Label<ul><li>You can add the label using Add label button on the sidebar</li><li>All the Added label will be shown on the Notes Form and Each Note.</li><li>You can Edit the label and it will be updated on the all the notes for which the particular label has been used</li><li>You can Delete the label and the particular label will be removed from all the notes</li></ul>Filter<ul><li>You can sort the notes based on the time it has been added.</li><li>You can also filter the notes based on the priority</li><li>For each label the label will be added to the side bar and you can click that and see the notes tagged with that particular label</li></ul>Archive Notes<ul><li>Archive button will be shown on each notes</li><li>You can unarchive the note from the archive notes</li><li>You can also delete the note from archive notes page</li></ul>Trash Note<ul><li>Trash button will be shown on each notes</li><li>You can Retrive the trashed notes from the Trash Page</li><li>You can also permenantly delete the Note from the trash page</li></ul>Profile page<ul><li>User profile page with email id of the user</li><li>Button to logout from the app.</li></ul>Private Routes<ul><li>All the user specific routes are made as private routes and can be accessed only after login</li></ul>Loaders and Toasts<ul><li>Loaders and toast is provided as the acknowledgment to the users</li></ul>Backend<ul><li>Backend is done with the help of firebase</li></ul><hr>

Key notes - Note taking app

Socialoo is a social media platform to share your thoughts, feelings and engage with them. Connect with people and get entertained.

Frontend: React, Redux toolkit, Fastart component library.
Backend: Firebase.

FeaturesLogin<ul><li>User able to login by entering email and password</li><li>User can use guest credentials to login</li><li>Form validation is done for login fields</li><li>Logged in user only can access the app</li></ul>Sign Up<ul><li>User able to create account and signup for the site</li><li>Form validation is done for signup fields</li></ul>Home Page<ul><li>Home page has the posts of the user who you follow</li><li>It also has suggestion card to other user you can follow</li></ul>Explore page<ul><li>Explore page shows the posts by all the user</li><li>It also has suggestion card to other user you can follow</li></ul>Create Post<ul><li>User can click create post button and an Form will appear in the modal</li><li>Where they can give the caption and chose image for a post</li><li>User can post a text post or image post</li></ul>Edit Post<ul><li>User can click edit button on users's post to edit the particular post posted by the user.</li><li>User can edit the text and image in the modal.</li></ul>Like Feature<ul><li>User can like/unlike like the post from post card</li></ul>Follow Feature<ul><li>User can follow/ unfollow a user from post card or suggestsion card.</li></ul>Save Feature<ul><li>User can add/remove a post from save in post card</li><li>Saved page shows all the saved posts and option to remnove it from page.</li></ul>Comment Feature<ul><li>When the user click the comment button from post card it will open the single post page.</li><li>Single post page have feature to comment.</li><li>User can also reply to existing comments.</li></ul>Share Feature<ul><li>When the share button in post card is clicked link to that particular post is copied to clipboard and the user can share them.</li></ul>Single Post Page<ul><li>Single Post page has the post with the comments of the post.</li></ul>Profile page<ul><li>User profile page with Name, Followers, Following, Bio and portfolio link.</li><li>Option to Edit the profile details like name, bio and portfolio link.</li><li>Button to logout from the app.</li></ul>Private Routes<ul><li>All the user specific routes are made as private routes and can be accessed only after login</li></ul>Loaders and Toasts<ul><li>Loaders and toast is provided as the acknowledgment to the users</li></ul>Backend<ul><li>Backend is done with the help of firebase</li></ul>