Some problem-solving ideas for daily life projects/apps in angular and react

ere are some daily life project ideas for Angular and React, complete with brief explanations and code examples. These projects can help you enhance your understanding of Angular and React by solving real-world problems. The code snippets will give you a basic framework to start with, and you can further build upon them to make the application more sophisticated.

1. To-Do List Application

Problem: People often need a way to keep track of tasks or to-dos. A simple to-do list allows them to organize their daily tasks and mark them as done.

Angular Example:

Create a New Angular Project:

ng new todo-app
cd todo-app
ng generate component todo

App Component (app.component.ts):

import { Component } from '@angular/core';

interface Todo {
  id: number;
  task: string;
  completed: boolean;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  todos: Todo[] = [];
  newTask: string = '';

  addTodo() {
    if (this.newTask.trim()) {
      const newTodo: Todo = {
        id: this.todos.length + 1,
        task: this.newTask,
        completed: false,
      };
      this.todos.push(newTodo);
      this.newTask = ''; // reset input
    }
  }

  toggleCompletion(todo: Todo) {
    todo.completed = !todo.completed;
  }

  deleteTodo(todoId: number) {
    this.todos = this.todos.filter(todo => todo.id !== todoId);
  }
}

Template (app.component.html):

<div>
  <h1>To-Do List</h1>
  <input [(ngModel)]="newTask" placeholder="Enter a task" />
  <button (click)="addTodo()">Add</button>

  <ul>
    <li *ngFor="let todo of todos">
      <span [ngClass]="{'completed': todo.completed}" (click)="toggleCompletion(todo)">
        {{ todo.task }}
      </span>
      <button (click)="deleteTodo(todo.id)">Delete</button>
    </li>
  </ul>
</div>

CSS (app.component.css):

.completed {
  text-decoration: line-through;
  color: grey;
}

React Example:

Create a React App:

npx create-react-app todo-app
cd todo-app

App Component (App.js):

import React, { useState } from 'react';

function App() {
  const [todos, setTodos] = useState([]);
  const [newTask, setNewTask] = useState('');

  const addTodo = () => {
    if (newTask.trim()) {
      const newTodo = {
        id: todos.length + 1,
        task: newTask,
        completed: false,
      };
      setTodos([...todos, newTodo]);
      setNewTask('');
    }
  };

  const toggleCompletion = (id) => {
    setTodos(todos.map(todo => 
      todo.id === id ? { ...todo, completed: !todo.completed } : todo
    ));
  };

  const deleteTodo = (id) => {
    setTodos(todos.filter(todo => todo.id !== id));
  };

  return (
    <div>
      <h1>To-Do List</h1>
      <input 
        type="text" 
        value={newTask} 
        onChange={(e) => setNewTask(e.target.value)} 
        placeholder="Enter a task" 
      />
      <button onClick={addTodo}>Add</button>

      <ul>
        {todos.map(todo => (
          <li key={todo.id}>
            <span 
              onClick={() => toggleCompletion(todo.id)} 
              style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}
            >
              {todo.task}
            </span>
            <button onClick={() => deleteTodo(todo.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

2. Expense Tracker

Problem: Managing finances, tracking income and expenses can be a challenge. A simple expense tracker helps monitor expenses and balance income.

Angular Example:

App Component (app.component.ts):

import { Component } from '@angular/core';

interface Expense {
  id: number;
  description: string;
  amount: number;
  type: 'income' | 'expense';
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  expenses: Expense[] = [];
  description: string = '';
  amount: number = 0;
  type: 'income' | 'expense' = 'expense';

  addExpense() {
    if (this.description && this.amount > 0) {
      const newExpense: Expense = {
        id: this.expenses.length + 1,
        description: this.description,
        amount: this.amount,
        type: this.type,
      };
      this.expenses.push(newExpense);
      this.description = '';
      this.amount = 0;
    }
  }

  getTotal() {
    return this.expenses.reduce((total, expense) => {
      return expense.type === 'income' ? total + expense.amount : total - expense.amount;
    }, 0);
  }
}

Template (app.component.html):

html
<div>
  <h1>Expense Tracker</h1>
  <input [(ngModel)]="description" placeholder="Description" />
  <input [(ngModel)]="amount" type="number" placeholder="Amount" />
  <select [(ngModel)]="type">
    <option value="income">Income</option>
    <option value="expense">Expense</option>
  </select>
  <button (click)="addExpense()">Add</button>

  <h2>Total: {{ getTotal() }}</h2>

  <ul>
    <li *ngFor="let expense of expenses">
      {{ expense.description }} - {{ expense.amount }} ({{ expense.type }})
    </li>
  </ul>
</div>

React Example:

App Component (App.js):

javascript
import React, { useState } from 'react';

function App() {
  const [expenses, setExpenses] = useState([]);
  const [description, setDescription] = useState('');
  const [amount, setAmount] = useState(0);
  const [type, setType] = useState('expense');

  const addExpense = () => {
    if (description && amount > 0) {
      const newExpense = {
        id: expenses.length + 1,
        description,
        amount,
        type,
      };
      setExpenses([...expenses, newExpense]);
      setDescription('');
      setAmount(0);
    }
  };

  const getTotal = () => {
    return expenses.reduce((total, expense) => 
      expense.type === 'income' ? total + expense.amount : total - expense.amount, 0
    );
  };

  return (
    <div>
      <h1>Expense Tracker</h1>
      <input 
        type="text" 
        value={description} 
        onChange={(e) => setDescription(e.target.value)} 
        placeholder="Description" 
      />
      <input 
        type="number" 
        value={amount} 
        onChange={(e) => setAmount(Number(e.target.value))} 
        placeholder="Amount" 
      />
      <select value={type} onChange={(e) => setType(e.target.value)}>
        <option value="income">Income</option>
        <option value="expense">Expense</option>
      </select>
      <button onClick={addExpense}>Add</button>

      <h2>Total: {getTotal()}</h2>

      <ul>
        {expenses.map(expense => (
          <li key={expense.id}>
            {expense.description} - {expense.amount} ({expense.type})
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

3. Simple Weather App

Problem: Many people need a way to quickly check the weather. A simple weather app can help users track current weather conditions.

React Example with API Integration (OpenWeatherMap):

Install Axios for API requests:
```
bash
npm install axios
```

App Component (App.js):

javascript
import React, { useState, useEffect } from 'react';
import axios from 'axios';

const WeatherApp = () => {
  const [city, setCity] = useState('London');
  const [weather, setWeather] = useState(null);

  useEffect(() => {
    axios.get(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=YOUR_API_KEY&units=metric`)
      .then((response) => setWeather(response.data))
      .catch((error) => console.error(error));
  }, [city]);

  return (
    <div>
      <h1>Weather App</h1>
      <input 
        type="text" 
        value={city} 
        onChange={(e) => setCity(e.target.value)} 
        placeholder="Enter city"
      />
      {weather && (
        <div>
          <h2>{weather.name}</h2>
          <p>{weather.main.temp}°C</p>
          <p>{weather.weather[0].description}</p>
        </div>
      )}
    </div>
  );
};

export default WeatherApp;

===========>

Building daily life projects and applications with Angular and React can be a great way to solve common problems while learning and improving your development skills. Below are some problem-solving ideas for daily life applications you can develop with Angular and React, focusing on common real-world scenarios.

1. Task Manager (To-Do List)

Problem: Managing tasks or daily activities is a common need for everyone. You may want to create a simple app that helps organize and prioritize your tasks.

Solution:

Key Features:
- Add, edit, delete tasks
- Mark tasks as completed or pending
- Sort tasks based on deadlines or priority
- Option to categorize tasks (work, personal, errands)
- Store tasks in local storage or backend database (Firebase, etc.)

Tech Stack:

Angular: Use Angular Services for managing state, Angular Material for UI components.
React: Use React hooks for managing state (useState, useEffect), and React Router for different views.

2. Budget Tracker/Expense Manager

Problem: Many people face difficulties in keeping track of their expenses and budgeting. An app that helps track income, expenses, and budget can be highly useful.

Solution:

Key Features:
- Add income and expense entries with categories (Food, Bills, etc.)
- View monthly/annual summaries with charts
- Set up a budget and track progress toward savings goals
- Store data locally or in a cloud database like Firebase or MongoDB

Tech Stack:

Angular: Angular Forms for input, Angular Material for charts and tables, Angular services for managing app logic.
React: Use useState and useReducer hooks to manage expenses and categories. Use react-chartjs-2 for data visualization.

3. Weather Application

Problem: You might need to check the weather for your location or any other city. A weather app can provide weather forecasts, temperatures, and other relevant information.

Solution:

Key Features:
- Show current weather, forecast for the next 7 days
- Display additional details like humidity, wind speed, etc.
- User can input a city name or allow geolocation to get the current location's weather
- Use an external API like OpenWeatherMap or WeatherStack to fetch data.

Tech Stack:

Angular: Use Angular HTTP client to make API calls. Angular Forms for user input.
React: Use useEffect for API calls and useState for storing weather data.

4. Fitness Tracker

Problem: Monitoring daily exercise and health habits is a challenge. An app that helps users track workouts, calorie intake, and progress could help solve this problem.

Solution:

Key Features:
- Log workouts (type, duration, intensity)
- Track calories consumed and burned
- Set and monitor fitness goals
- Visualize progress with charts (calories burned, weight, etc.)
- Integrate with a health API or third-party service to sync fitness data from wearables (optional)

Tech Stack:

Angular: Use Angular services for state management. Angular Material for UI components like tables and graphs.
React: Use useState for managing user inputs, useEffect to update data, and libraries like chart.js for progress visualization.

5. Notes Application

Problem: Keep track of important information, meeting notes, or reminders in an organized manner.

Solution:

Key Features:
- Add, edit, and delete notes
- Organize notes into categories or folders
- Ability to search through notes quickly
- Support for rich-text (formatting, images, etc.)

Tech Stack:

Angular: Use Angular Forms for handling text input. Angular Services to manage state, Angular Material to enhance the UI.
React: Use useState and useContext for managing global state. You can use a package like react-quill for rich-text editing.

6. Shopping List Application

Problem: Managing a shopping list is a common task, whether it's for groceries or general shopping. An app can help you organize and track what you need to buy.

Solution:

Key Features:
- Add, edit, and delete shopping items
- Categorize items (e.g., groceries, electronics, etc.)
- Mark items as purchased
- Set quantities for items and track remaining items
- Sync shopping lists across devices (using cloud storage like Firebase)

Tech Stack:

Angular: Use Angular Material for the list UI and input forms, Angular Services to manage the state of the shopping list.
React: Use useState to manage shopping list items, and localStorage for persisting the list.

7. Recipe Finder and Meal Planner

Problem: People often struggle with meal planning and finding new recipes. A recipe finder and meal planner can help users organize their weekly meals and discover new dishes.

Solution:

Key Features:
- Search for recipes by ingredients or cuisine
- Save favorite recipes
- Plan meals for the week
- Create a shopping list based on the recipes selected
- Use an external API like Spoonacular or Edamam for recipe data

Tech Stack:

Angular: Use Angular services to fetch recipe data, Angular Material to display recipes in cards or lists.
React: Use useState for managing selected recipes, useEffect for fetching data from external APIs.

8. Reminder/Alarm Application

Problem: Many people need reminders for tasks, appointments, or daily habits. A reminder app can help ensure things are done on time.

Solution:

Key Features:
- Set one-time or recurring reminders
- Notifications at the set time
- Categories for reminders (e.g., Work, Personal, Health)
- Option to snooze reminders

Tech Stack:

Angular: Use Angular Services for managing reminder logic, Angular Material for the UI, and browser notifications API for reminders.
React: Use useState to store reminder data and browser notifications API for alerting users.

9. Time Tracker for Freelancers/Projects

Problem: Freelancers or project-based workers often need to track the time spent on different tasks or projects. An app can help log hours and generate reports.

Solution:

Key Features:
- Log hours worked on specific tasks or projects
- Categorize tasks (e.g., client work, personal projects)
- Generate reports for weekly or monthly work summaries
- Option to export data to CSV or PDF

Tech Stack:

Angular: Use Angular Forms for data input, Angular services for managing the logged hours, and a charting library for progress visualization.
React: Use useState for managing time logs, useEffect for data export functionality, and react-chartjs-2 for visualizing time spent.

10. Habit Tracker

Problem: Many people want to develop good habits and track their progress. A habit tracker can help users visualize their progress and stay motivated.

Solution:

Key Features:
- Track habits (e.g., exercise, reading, hydration)
- Set daily or weekly goals for habits
- Visualize progress with streaks and charts
- Provide motivational reminders and achievements

Tech Stack:

Angular: Use Angular Material for UI components, Angular Services to track and manage habits, and store data in Firebase or local storage.
React: Use useState for managing habit status, useEffect for updating progress, and chart libraries like react-chartjs-2.

Conclusion

These simple projects—To-Do List, Expense Tracker, and Weather App—demonstrate basic problem-solving in daily life scenarios using Angular and React. You can extend these applications by adding features such as persistence (e.g., saving to local storage or a backend), better UI/UX, authentication, and more. As you develop these projects, try to experiment with new libraries, state management, and styling solutions to enhance the user experience.

Search This Blog

HappyNewsMan (TechLead Pratap)