Todos project / Vera Sjunnesson

README.md

@@ -1,13 +1,107 @@
 # Project Todos
 
-Replace this readme with your own information about your project.
+![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)
+![Redux](https://img.shields.io/badge/redux-%23593d88.svg?style=for-the-badge&logo=redux&logoColor=white)
+![Styled Components](https://img.shields.io/badge/styled--components-DB7093?style=for-the-badge&logo=styled-components&logoColor=white)
 
-Start by briefly describing the assignment in a sentence or two. Keep it short and to the point.
+A classic to do-app built in React using Redux.
 
-## The problem
+## Functionality
 
-Describe how you approached to problem, and what tools and techniques you used to solve it. How did you plan? What technologies did you use? If you had more time, what would be next?
+The user can:
+- Add new tasks with a due date
+- Check if tasks are overdue
+- Delete tasks
+- Flag important tasks
+- Toggle the completion of tasks
+- Get the count of finished tasks
+- Get the total count of tasks on the list
+- Create and name new projects
+- Delete projects
+- Add, delete, toggle, flag tasks in projects
+
+## The process
+
+- Research design and functionality of commonly used in todo-apps
+- Sketch and iterate on a layout and user flow
+- Set up the store in Redux React
+- Started off with the most basic functionality, i.e. creating reducers and actions to add and delete tasks
+- Made sure the data moved properly between the components and the Redux store, using the console and Redux DevTool
+- When everything worked I went on to add reducers and actions to toggle, flag and count tasks
+- Then I moved on to work on more functionality: Reducers and actions to add new lists in an array, i.e. add new projects
+- Added reducers and actions to delete lists + a functionality to toggle between opening and closing lists
+- Added functionality to the list items in the lists in the array, i.e. toggle completion of tasks, flag tasks and count tasks
+- Styling: I worked with Global Style/Styled Components and made the app responsive
+- I got inspired by this [SVG wave animation in code pen](https://codepen.io/tedmcdo/pen/PqxKXg "Wave animation") and decided to manipulate it and place in the header section
+<br />
+<img width="300" alt="To Do Demo" src="./code/public/images/todo-demo.png">
+
+## Potential improvements to be made
+
+- Work on styling, user flow and accessibility
+- Work on backend, such as: authentication and to store all tasks and lists on a database
+- Break down the react components a bit more
+- Work with styled components more extensively
+- Add extra functionality, such as being able to add a task to a specific project when creating it
+
+## Installation Instructions
+
+Follow these steps to clone and run the project locally:
+
+1. Clone the repository
+```
+https://github.com/Vera-Sjunnesson/project-todos.git
+```
+2. Navigate to the project directory and code folder where the package.json file is located 
+```
+cd project-todos
+```
+then:
+```
+cd code
+```
+3. Install dependencies:
+Ensure you have Node.js and npm installed on your machine. Then install the project dependencies using:
+```
+npm install
+```
+4. Start the Development Server:
+Run the following command to start the development server and launch the app in your default web browser:
+```
+npm start
+```
+The app should automatically open in your browser at http://localhost:3000. If not, navigate to this URL manually.\
+
+5. Explore the App:
+Explore the app, add tasks, create projects and test out the functionality.
+
+### Additional notes:
+
+- Redux DevTools Extension: If you have the Redux DevTools Extension installed in your browser, you can use it to inspect and debug the state of your Redux store.
+- Node.js: Make sure you have Node.js installed on your machine.
+- npm (Node Package Manager): npm comes bundled with Node.js; however, ensure you have a recent version.
+
+## Dependencies
+
+- React
+- ReactDOM
+- Redux
+- React-Redux
+- Styled Components
+- date-fns
+- react-date-picker
+- FontAwesome
+- Eslint and related packages
+- Uniqid
+- react-global-style
 
 ## View it live
 
-Every project should be deployed somewhere. Be sure to include the link to the deployed project so that the viewer can click around and see what it's all about.
+https://to-do-project-vera.netlify.app/
+
+
+
+
+
+
+

code/README.md

@@ -1,19 +1,19 @@
-# Technigo React Starter App
+# Project Todos
 
-This app has been generated using `create-react-app`, then cleaned up a little so we have a project with just the elements we need to get started.
+To create a to do list using redux toolkit.
 
-Add components in the `src` folder and use them in `src/app.js` to get started.
+## The problem
 
-## Usage
+I started off by making a sketch how the project would look like and how it would be organized / structured (with dropdowns collapsing)
 
-1. On GitHub, click the 'use this template' button to create a new repo on your account
-1. Clone the new repo to your computer
-1. Install required dependencies with npm: `npm install`
-1. Start the project: `npm start`
+Then I started building all basic functionality, like adding items to the list and deleting items, later moved on to sorting items, depending on if they were completed or priority.
 
-Alternatively, if you don't want a new git repo on your account;
+When all that worked I moved to trying to create projects from scratch: arrays inside an array. In order (I don't know if it is the best way) to set a project name for each array I placed the arrays inside objects inside the 'main' array.
 
-1. Download & extract the [latest release](https://github.com/Technigo/react-starter/releases/latest) from GitHub
-1. Open the directory in the terminal: `cd /path/to/react-starter`
-1. Install required dependencies with npm: `npm install`
-1. Start the project: `npm start`
+I used the redux dev tool a lot and stack overflow. 
+
+If I had more time I would work on structuring the project better.
+
+## View it live
+
+https://to-do-project-vera.netlify.app/