Skip to content

Commit e98e318

Browse files
chrisreddingtonchrisreddington
authored
Merge pull request #9 from octobooth/tailwind-upgrade
Refactor and enhance Tailwind CSS integration with data hydration
2 parents 70eb6f1 + 1012733 commit e98e318

26 files changed

+1280
-2143
lines changed

‎.github/copilot-instructions.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# React Todo App - Copilot Instructions
1+
# Task Dashboard App - Copilot Instructions
22

33
## Project Overview
44
This is a React-based Todo application that allows users to create, manage, and organize tasks with features like tags, task lists, and task filtering. The application is built using React, Framer Motion for animations, and Tailwind CSS for styling. It uses Vite as the build tool and Vitest for testing.

‎.github/workflows/attest-and-deploy.yml‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,9 +37,11 @@ jobs:
3737
format: 'spdx-json'
3838
output-file: 'sbom.spdx.json'
3939

40-
# Build the site using the build script in package.json
41-
- name: Build site
40+
# Build the site using the build script in package.json with data hydration enabled
41+
- name: Build site with data hydration
4242
run: npm run build
43+
env:
44+
VITE_ENABLE_DATA_HYDRATION: 'true'
4345

4446
# Package the build into a tarball so it can be easily verified
4547
- name: Package the build

‎.github/workflows/ci-cd.yml‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
name: React Todo App CI/CD
1+
name: Task Dashboard App CI/CD
22

33
on:
44
push:
@@ -29,8 +29,10 @@ jobs:
2929
- name: Install dependencies
3030
run: npm ci
3131

32-
- name: Build application
32+
- name: Build application (without data hydration)
3333
run: npm run build
34+
env:
35+
VITE_ENABLE_DATA_HYDRATION: 'false'
3436

3537
- name: Run tests
3638
run: npm test

‎README.md‎

Lines changed: 77 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,107 @@
1-
# GitHub Codespaces ♥️ React
1+
# Task Dashboard
22

3-
Welcome to your shiny new Codespace running React! We've got everything fired up and running for you to explore React.
3+
A task management application that allows users to create, organize, and filter tasks using a modern, responsive UI built with React.
44

5-
You've got a blank canvas to work on from a git perspective as well. There's a single initial commit with the what you're seeing right now - where you go from here is up to you!
5+
![Task Dashboard](https://github.com/yourusername/todo-app-attestations/raw/main/public/screenshot.png)
66

7-
Everything you do here is contained within this one codespace. There is no repository on GitHub yet. If and when you’re ready you can click "Publish Branch" and we’ll create your repository and push up your project. If you were just exploring then and have no further need for this code then you can simply delete your codespace and it's gone forever.
7+
> **Note:** This application is intended for demonstration purposes only and is not meant for production use.
88
9-
This project was bootstrapped for you with [Vite](https://vitejs.dev/).
9+
## Features
1010

11-
## Available Scripts
11+
- **Task Management**: Create, complete, and delete tasks
12+
- **Task Tags**: Organize tasks with customizable tags
13+
- **Task Lists**: Create multiple lists with custom filters
14+
- **List Filters**: Filter tasks by tags or completion status
15+
- **Animations**: Smooth transitions and animations using Framer Motion
16+
- **Responsive Design**: Works on desktop and mobile devices
1217

13-
In the project directory, you can run:
18+
## Technology Stack
1419

15-
### `npm start`
20+
- **React**: Modern React with functional components and hooks
21+
- **Tailwind CSS**: Utility-first CSS framework for styling
22+
- **Framer Motion**: Animation library for React
23+
- **Vite**: Fast, modern build tool and development server
24+
- **Vitest**: Testing framework compatible with Vite
1625

17-
We've already run this for you in the `Codespaces: server` terminal window below. If you need to stop the server for any reason you can just run `npm start` again to bring it back online.
26+
## Getting Started
1827

19-
Runs the app in the development mode.\
20-
Open [http://localhost:3000/](http://localhost:3000/) in the built-in Simple Browser (`Cmd/Ctrl + Shift + P > Simple Browser: Show`) to view your running application.
28+
### Prerequisites
2129

22-
The page will reload automatically when you make changes.\
23-
You may also see any lint errors in the console.
30+
- Node.js (v18+)
31+
- npm (v10+)
2432

25-
### `npm test`
33+
### Installation
2634

27-
Launches the test runner in the interactive watch mode.\
28-
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
35+
1. Clone the repository:
36+
```bash
37+
git clone https://github.com/yourusername/todo-app-attestations.git
38+
cd todo-app-attestations
39+
```
2940

30-
### `npm run build`
41+
2. Install dependencies:
42+
```bash
43+
npm install
44+
```
3145

32-
Builds the app for production to the `build` folder.\
33-
It correctly bundles React in production mode and optimizes the build for the best performance.
46+
3. Start the development server:
47+
```bash
48+
npm start
49+
```
3450

35-
The build is minified and the filenames include the hashes.\
36-
Your app is ready to be deployed!
51+
4. Open [http://localhost:3000](http://localhost:3000) to view the app
3752

38-
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
53+
### Available Scripts
3954

40-
## Learn More
55+
- `npm start` - Start the development server
56+
- `npm start:hydrated` - Start the development server with data hydration enabled
57+
- `npm run build` - Build for production
58+
- `npm run build:hydrated` - Build for production with data hydration enabled
59+
- `npm run build:clean` - Build for production with data hydration explicitly disabled
60+
- `npm run preview` - Preview the production build locally
61+
- `npm run preview:hydrated` - Preview the production build with data hydration enabled
62+
- `npm test` - Run tests with Vitest
4163

42-
You can learn more in the [Vite documentation](https://vitejs.dev/guide/).
64+
### Data Hydration
4365

44-
To learn Vitest, a Vite-native testing framework, go to [Vitest documentation](https://vitest.dev/guide/)
66+
The application supports pre-populating the app with sample data through an optional hydration process:
4567

46-
To learn React, check out the [React documentation](https://reactjs.org/).
68+
- Sample data is defined in `src/data/initialData.json`
69+
- Hydration can be enabled/disabled using the `VITE_ENABLE_DATA_HYDRATION` environment variable
70+
- Use the convenience scripts for development with hydration:
71+
- `npm run start:hydrated` - Development with sample data
72+
- `npm run build:hydrated` - Production build with sample data
73+
- `npm run build:clean` - Production build without sample data
74+
- GitHub Actions deployment automatically enables hydration for the production build
4775

48-
### Code Splitting
76+
## Architecture
4977

50-
This section has moved here: [https://sambitsahoo.com/blog/vite-code-splitting-that-works.html](https://sambitsahoo.com/blog/vite-code-splitting-that-works.html)
78+
### State Management
5179

52-
### Analyzing the Bundle Size
80+
The application uses React Context for state management:
5381

54-
This section has moved here: [https://github.com/btd/rollup-plugin-visualizer#rollup-plugin-visualizer](https://github.com/btd/rollup-plugin-visualizer#rollup-plugin-visualizer)
82+
- **TaskContext**: Manages tasks state and operations (add, toggle, delete)
83+
- **TagContext**: Manages tags and their relationships with tasks
84+
- **ListContext**: Manages task lists and filtering logic
5585

56-
### Making a Progressive Web App
86+
### UI Components
5787

58-
This section has moved here: [https://dev.to/hamdankhan364/simplifying-progressive-web-app-pwa-development-with-vite-a-beginners-guide-38cf](https://dev.to/hamdankhan364/simplifying-progressive-web-app-pwa-development-with-vite-a-beginners-guide-38cf)
88+
The application features several key components:
89+
- **TaskList**: Renders a list of tasks
90+
- **TaskItem**: Renders an individual task
91+
- **TaskBoard**: Manages multiple task lists
92+
- **TagManager**: Interface for creating and managing tags
93+
- **GlobalTaskForm**: Form for creating new tasks
94+
- **ListAddTask**: Form for adding tasks to specific lists
95+
- **TaskListConfig**: Interface for configuring task lists
5996

60-
### Advanced Configuration
97+
## Contributing
6198

62-
This section has moved here: [https://vitejs.dev/guide/build.html#advanced-base-options](https://vitejs.dev/guide/build.html#advanced-base-options)
99+
1. Fork the repository
100+
2. Create your feature branch (`git checkout -b feature/amazing-feature`)
101+
3. Commit your changes (`git commit -m 'Add some amazing feature'`)
102+
4. Push to the branch (`git push origin feature/amazing-feature`)
103+
5. Open a Pull Request
63104

64-
### Deployment
105+
## License
65106

66-
This section has moved here: [https://vitejs.dev/guide/build.html](https://vitejs.dev/guide/build.html)
67-
68-
### Troubleshooting
69-
70-
This section has moved here: [https://vitejs.dev/guide/troubleshooting.html](https://vitejs.dev/guide/troubleshooting.html)
107+
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
1616
-->
1717
<link rel="manifest" href="/manifest.json" />
18-
<title>React App</title>
18+
<title>Task Dashboard</title>
1919
</head>
2020
<body>
2121
<noscript>You need to enable JavaScript to run this app.</noscript>

0 commit comments

Comments
 (0)