Coder Social home page Coder Social logo

this-mkhy / react-curve Goto Github PK

View Code? Open in Web Editor NEW
8.0 1.0 13.0 1.13 MB

Open source project for creating small UI component to build large scale projects

Home Page: https://this-react-curve.vercel.app/

HTML 1.19% CSS 14.10% JavaScript 84.23% Dockerfile 0.48%
javascript react hacktoberfest hacktoberfest-accepted

react-curve's Introduction

React Curve

This is react-curve, open source project where I can share and start creating small UI component in the way I understood the concepts to build large scale projects .

This is a work in progress and I don't think it will ever finish. I will continue updating it with examples and tricks.

Content:

Live Preview: React-Curve

Week 1 - Counter App

Read: how-to-code-counter

counter-app

Week 2 - Colors App

Read: How-to-map-over-a-list-of-colors

colors-app

Week 3 - Toggle App

Read: how-to-toggle

toggle-app

Week 4 - Handle Input App

Read: how-to-handle-input

handle-input-app

Week 5 - Disable Button App

Read: how-to-disable-button

disable-button-app

Week 6 - Sum Two Numbers App

Read: how-to-sum-two-numbers

sum-two-numbers-app

Week 7 - Todo Add App

*Read: how-to-add-to-todo-list

todo-add-app

Week 8 - Todo Delete App

*Read: how-to-delete-from-todo-list

todo-delete-app

Week 9 - Pomodoro Timer

pomodoro-timer-app

Docker ๐Ÿณ

Install Docker first if you don't have it on your local PC.

How to run

This application is using docker compose file to declare and build image. To run the entire app use the next command in your terminal in the project root directory.

docker compose up

You only need one command to install dependencies and run application. Super easy!

To see running application navigate to http://localhost:8080/

Additional commands

If you want to keep your terminal free of logs you may use the next command

docker compose up -d

To see logs from the container in the detached mode use

docker compose logs -f

To stop containers use

docker compose stop

To stop and delete containers use

docker compose down

To delete images from your PC use

docker image rm <image ID>

Contributors

react-curve's People

Contributors

balayokesh avatar boshrajaber avatar jeevaramanathan avatar okitel avatar rickansen avatar sardarshubham avatar sen-442b avatar this-mkhy avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

react-curve's Issues

Header Display Issue on Mobile Devices

Title:
Header Display Issue on Mobile Devices

Description:
I noticed a problem with the header of the website when accessing it on mobile devices. The header elements are not displaying correctly, and it's impacting the overall user experience. The header shortens or contracts on mobile devices, causing some header elements to become truncated.

Screenshot:
issue

Hacktoberfest 2023:
I would love to contribute to the resolution of this issue under Hacktoberfest 2023. If there are specific tasks or guidelines for contributors, please let me know, and I'll be happy to get involved.

Line through text in todo v1.

Currently, the items added in the todo-list in todo v1 are striked automatically because of the text-decoration property in itemList class in TodoAddV1.css. But, the striking line is not removed even if the text-decoration property is removed from the mentioned class. Any reason as to why this is happening and how can I resolve this?

Adding back button icon.

Currently to move back to homepage, there is home text at the bottom. But it is not much informative and also not easily visible. I want to create a back button icon on the top left corner.
Screenshot from 2022-10-25 18-31-21

light mode

I would like to add light mode in this website, can you assign this issue to me ?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.