Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Convert to Reactjs Applictaion #214

Draft
wants to merge 8 commits into
base: main
Choose a base branch
from

Conversation

shangesh-tech
Copy link

PR Description

Summary of Changes:

This PR refactors the existing ToDo application from plain HTML and CSS into a ReactJS-based application. It also integrates Redux Toolkit for state management and TailwindCSS for styling.

  • Converted the static UI into React components.
  • Integrated Redux Toolkit for managing the application's state (e.g., adding, removing, and updating ToDo items).
  • Added TailwindCSS for utility-first styling to ensure a responsive design.
  • Refactored the application for better maintainability and reusability with a component-based architecture.

Related Issue: Fixes #185


Type of Change

  • Converted HTML and CSS to ReactJS + TailwindCSS.
  • New feature (added Redux Toolkit for state management).
  • Refactor (significant code restructuring).
  • UI enhancement (improved design and layout).
  • Added full responsive design for all screen sizes.

How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide instructions so they can be reproduced.

  • Test A: Manually tested core ToDo features (add, delete, edit tasks) in the browser.
  • Test B: Verified Redux store state using React Developer Tools.
  • Test C: Ensured consistency of CSS classes with Tailwind utility classes.

Checklist

  • My code follows the similar style of the project, improving UI and UX while maintaining design consistency.
  • I have performed a self-review of my code.
  • I have commented on any hard-to-understand parts of the code.
  • All existing and new functionality has been tested and works as expected.
  • No new warnings have been introduced.

@shangesh-tech
Copy link
Author

Review and merge to your application

Copy link
Contributor

@divanshu-go divanshu-go left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@shangesh-tech Please run npm run format and npm run lint in order to pass the checks

Copy link
Contributor

@divanshu-go divanshu-go left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great work !
Kindly please submit a Screen recording where you show that your changes are working correctly.
Also do the necessary changes to the README.md

@shangesh-tech
Copy link
Author

@bryans-go yes , i will add my screen recording and update Readme.md , give me a time

@shangesh-tech
Copy link
Author

@shangesh-tech Please run npm run format and npm run lint in order to pass the checks

i didnot understand , what i want to do @bryans-go

@shangesh-tech
Copy link
Author

@bryans-go as iam new to this , can you explain this , where to run

@divanshu-go
Copy link
Contributor

divanshu-go commented Oct 17, 2024

@shangesh-tech Please run npm run format and npm run lint in order to pass the checks

i didnot understand , what i want to do @bryans-go

Please install npm and then do npm install
and then the following commands.

  1. npm run format to format your code
  2. npm run lint to resolve any linting issues

NOTE: you will need to run these commands in the project directory

Signed-off-by: Shangesh S <[email protected]>
Signed-off-by: Shangesh S <[email protected]>
Signed-off-by: Shangesh S <[email protected]>
@shangesh-tech
Copy link
Author

yes , i do all this linting and formatting but why it fails in ci but this work in my local..

@bryans-go

@divanshu-go
Copy link
Contributor

divanshu-go commented Oct 17, 2024

image
You will need to make necessary changes in package.json
this is the old package.json
use the all the things from it including the scripts into the new package.json that you have created in frontend folder

{
  "name": "to-do-list",
  "version": "1.0.0",
  "description": "A simple and interactive To-Do List application built with HTML, CSS, and JavaScript.",
  "main": "script.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "format": "prettier --write .",
    "prettier": "prettier --check .",
    "lint": "eslint ."
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@eslint/js": "^9.12.0",
    "eslint": "^9.12.0",
    "globals": "^15.11.0",
    "prettier": "^3.3.3"
  },
  "dependencies": {
    "framer-motion": "^11.11.8"
  }
}

Signed-off-by: Shangesh S <[email protected]>
Signed-off-by: Shangesh S <[email protected]>
Signed-off-by: Shangesh S <[email protected]>
@shangesh-tech
Copy link
Author

i found the issue , why it is not running becauses the working direct is frontend in react but old application is Todo-List so that only throw error

image

i also change my .gthub/workflow/formate.yml and lint.yml , how can we resolve this

@bryans-go

@divanshu-go
Copy link
Contributor

@shangesh-tech Please first share the screen recording where it is working properly.

@shangesh-tech
Copy link
Author

@bryans-go

https://drive.google.com/file/d/19eiHcwEvP_xRa8D8XWlavgZDtQ0OzyYy/view?usp=sharing

here i add drive link .....

review the screen recording @bryans-go

@Anshgrover23
Copy link
Collaborator

@shangesh-tech nice concept. but no need of this right now. can u only make a PR for edit functionality that is in your video. i only want that right now.

@Anshgrover23
Copy link
Collaborator

@shangesh-tech putting this in draft as no there is no updates from your side.

@Anshgrover23 Anshgrover23 marked this pull request as draft November 3, 2024 09:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[FEATURE] Convert this application to Reactjs + Tailwindcss (with Responsive)
3 participants