keerat666 / lumix

An open source React UI Library

Hi there 👋

Welcome to my GitHub! 🚀

🏅 It's been a crazy 2023 with 2 back to back hackathon wins :

🏆 Winner at Bengaluru Open Mobility Challenge 2023 by Namma Yatri and ONDC.

🏆 Champion of inCode: Challenging Injustice 2023 by inDrive.

• 🔭 I’m currently working on an idea for my next hackathon!
• 👯 I’m looking to collaborate on fun side projects that have the potential to earn money
• 📫 How to reach me: Drop me a message at [email protected]
• ⚡ Fun fact: The first-ever registered domain name was "symbolics.com" in 1985.

Thanks for visiting 👨🏽‍💻

lumix's Issues

Build a Date Picker Component

Design and implement a date picker component for selecting dates in various formats.

Library Documentation

There should be sufficient documentation so that if anyone wants to use these components, he knows the functionality of these components and how to use them.

Add a Tooltip Component

Implement a tooltip component that displays additional information when users hover over specific elements.

Add bootstrap to the project

Add bootstrap to the project once the project is initialized

create a custom skeleton loader component

create a skeleton loader for multiple purposes, eg. profile page, tables, etc
provide possible customizations related to color, size, quantity, etc.

Create the Documentation page where the various components would be displayed.

Create a single page that would show the various components that people have contributed.

create a component to render multiple tabs & respective contents

create a reusable component to render multiple tabs with content body of each tab,
provide as much customization as possible for:

1. indicator
2. tabs color
3. content body background
4. complete wrapper background, etc

create a simple component to show badges

create a component to show all possible variants of badges.
variants can include all possible shapes, color, visibility, etc.

Add a new radio button component

Add a new radio button component that accepts the radio label and an on-change function as a prop

setup tailwind css

add tailwind css to the application with all possible imports and tailwind configurations.
bonus addons: example to show how can we override tailwind configurations globally

Develop a Carousel Component

Create a carousel component that can display a series of images or content in a slideshow format.

Update Readme

Update the readme of this project and set ground rules.

setup authentication context API to store useful tokens/variables with expiration timestamp

setup a context API with custom hook to allow token and other important useful variables to be stored in states and wrap that context provider at correct place in application.
Also add a expiration timestamp to let that token expire after a provided time, add that expiry check logic too

create a responsive footer with mock data

create a responsive footer component that can be wrapped globally for all available routes.
for now you can add any number of colums showing some dummy data/links
and copyright text with dynamically updating year

Change the React favicon and add a logo

Create a simple logo and add that logo to the repo and modify the favicon.

Edit the description in index.html

The description meta tag says :

Change the content to : Lumix - A UI Library made in React.

Add a new input component

Add a new input component that can be sent the placeholder, onchange, and input type as props

create a image uploader component that can also show upload progress

create a component that allows you to upload images to any service and it also shows upload progress.

create a reusable component to show multiple list of steps in a process

create a simple component that can show multiple list of steps in a process, keep in mind all possible types of modifications and customizations possible, eg:

1. vertical steps
2. horizontal steps
3. steps with highlighting number
4. steps with numbers and text for each step
5. custom colors
6. scrollable wrapper

Add a new component having only a button

Add a new component that has a fully styled button and to which on an onclick method be provided as a prop.

A generic confirmation modal

A generic confirmation modal, that receives title, text, two buttons information (button text and onclick action). This component can be called anywhere and data can be passed to it to change its behaviour!

create a component to show profile avatars

create a component to show all possible types of avatars, could be categories on the basis of:

1. image
2. letter (name first character or first and last name's first character)
3. sizes
4. icons
5. shapes

Initialize the repo with React starter Code

Use create React App and initialize the repo

Create a Basic Alert Component

Develop a straightforward alert component that can display messages to users.

create a multiple draggable divs component

create a wrapper of multiple div elements which can be dragged to re-order their positions in the actual sequence.

use react service provider to prompt user of any change in current page without the need to refresh

Difficulty level: HARD
create the react service provider that can be used at multiple places for multiple purposes to prompt user of any change that has been made to that page, this could be:

1. change in a listing
2. change in a status of something

without the need to hard refresh the complete webpage/tab/route at given moment

demonstrate react suspense and lazy loading of components

demonstrate suspense and lazy loading of components that could also be a random image fetched from https://picsum.photos/id/${Math.round(Math.random() * 100)}/400/300

Implement a Dark Mode Toggle

Create a toggle switch that enables users to switch between light and dark modes.

create a generalised & reusable component for accordions

create a reusable component that can work for both:

1. multiple open accordions (at once) &
2. single open accordion (at once)

provide all possible reusability features via props.

setup a context API with custom hook eg. ApiContext

setup a context API using custom hook in application where we can call all APIs from single source and use the exported variables/states in any component. This will also help us in preventing unwanted repetitive API calls.
also add a feature to restore state on webpage reload by using either localstorage or sessionstorage.

Optimize Image Loading

Improve image loading performance by implementing lazy loading for images in the library.

Add Loading Spinner Component

Develop a loading spinner component that can be easily integrated into various parts of Lumix.

Create a Rating Component

Design and implement a rating component that allows users to provide ratings or feedback.

Add a New Font Family

Enhance Lumix by integrating a new font family to give developers more typography choices.

Add a card view component

Add a new component that renders a card view with an image on top and a heading and the description below the image. Most of these properties like the img src, heading and description should be sent as props.

setup basic RTKQ (Redux Tool Kit Query)

add basic boilerplate needed to setup redux using RTKQ at global application level

Create a Basic Form Input Component

Develop a simple form input component that can be easily integrated into Lumix.

Create a Dropdown Component

Develop a dropdown component that allows users to select options from a list.

Add a new component having a image tag

Add a new component which has an image tag. It should accept the height, width and the src path of the image.