Beginner to Advance developers project ideas with list and coding examples in react and angular ?

 Creating projects is one of the best ways to learn and improve your skills as a React or Angular developer. Below is a list of Beginner to Advanced projects along with brief explanations and coding examples to help you build your projects from scratch in React and Angular.

---

1. Beginner Projects

1.1. To-Do List App

• Description: A basic app where users can add, edit, delete, and mark tasks as completed.

• React Example:

  import React, { useState } from 'react';
  
  const TodoApp = () => {
      const [tasks, setTasks] = useState([]);
      const [task, setTask] = useState("");
  
      const addTask = () => {
          setTasks([...tasks, { id: tasks.length + 1, name: task, completed: false }]);
          setTask("");
      };
  
      const toggleTask = (id) => {
          setTasks(tasks.map((task) => 
              task.id === id ? { ...task, completed: !task.completed } : task
          ));
      };
  
      const deleteTask = (id) => {
          setTasks(tasks.filter(task => task.id !== id));
      };
  
      return (
          <div>
              <h1>Todo List</h1>
              <input type="text" value={task} onChange={(e) => setTask(e.target.value)} />
              <button onClick={addTask}>Add Task</button>
              <ul>
                  {tasks.map((task) => (
                      <li key={task.id}>
                          <span style={{ textDecoration: task.completed ? "line-through" : "none" }}>
                              {task.name}
                          </span>
                          <button onClick={() => toggleTask(task.id)}>Toggle</button>
                          <button onClick={() => deleteTask(task.id)}>Delete</button>
                      </li>
                  ))}
              </ul>
          </div>
      );
  };
  
  export default TodoApp;
  

• Angular Example:

  import { Component } from '@angular/core';
  
  interface Task {
    id: number;
    name: string;
    completed: boolean;
  }
  
  @Component({
    selector: 'app-todo',
    templateUrl: './todo.component.html',
    styleUrls: ['./todo.component.css']
  })
  export class TodoComponent {
    tasks: Task[] = [];
    task: string = "";
  
    addTask() {
      this.tasks.push({ id: this.tasks.length + 1, name: this.task, completed: false });
      this.task = '';
    }
  
    toggleTask(id: number) {
      const task = this.tasks.find(task => task.id === id);
      if (task) {
        task.completed = !task.completed;
      }
    }
  
    deleteTask(id: number) {
      this.tasks = this.tasks.filter(task => task.id !== id);
    }
  }
  

---

1.2. Weather App

• Description: Fetch weather data from a public API like OpenWeatherMap and display it.
• React Example:

  import React, { useState } from 'react';
  import axios from 'axios';
  
  const WeatherApp = () => {
      const [city, setCity] = useState("");
      const [weather, setWeather] = useState(null);
  
      const fetchWeather = async () => {
          try {
              const response = await axios.get(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=YOUR_API_KEY`);
              setWeather(response.data);
          } catch (error) {
              console.error("Error fetching weather data", error);
          }
      };
  
      return (
          <div>
              <h1>Weather App</h1>
              <input type="text" value={city} onChange={(e) => setCity(e.target.value)} placeholder="Enter city name" />
              <button onClick={fetchWeather}>Get Weather</button>
              {weather && (
                  <div>
                      <h3>{weather.name}</h3>
                      <p>Temperature: {Math.round(weather.main.temp - 273.15)}°C</p>
                      <p>Weather: {weather.weather[0].description}</p>
                  </div>
              )}
          </div>
      );
  };
  
  export default WeatherApp;
  

---

2. Intermediate Projects

2.1. Movie Database App

• Description: Create an app that displays movies fetched from a public API like TMDB (The Movie Database).
• React Example:

  import React, { useState, useEffect } from 'react';
  import axios from 'axios';
  
  const MovieApp = () => {
      const [movies, setMovies] = useState([]);
      const [query, setQuery] = useState("");
  
      useEffect(() => {
          const fetchMovies = async () => {
              const response = await axios.get(`https://api.themoviedb.org/3/search/movie?query=${query}&api_key=YOUR_API_KEY`);
              setMovies(response.data.results);
          };
          if (query) fetchMovies();
      }, [query]);
  
      return (
          <div>
              <h1>Movie Database</h1>
              <input type="text" value={query} onChange={(e) => setQuery(e.target.value)} placeholder="Search for movies" />
              <div>
                  {movies.map(movie => (
                      <div key={movie.id}>
                          <h2>{movie.title}</h2>
                          <p>{movie.overview}</p>
                      </div>
                  ))}
              </div>
          </div>
      );
  };
  
  export default MovieApp;
  

---

2.2. Blogging Platform

• Description: Build a simple blogging platform where users can create, read, edit, and delete posts.
• Angular Example:

  import { Component } from '@angular/core';
  
  interface Post {
    id: number;
    title: string;
    content: string;
  }
  
  @Component({
    selector: 'app-blog',
    templateUrl: './blog.component.html',
    styleUrls: ['./blog.component.css']
  })
  export class BlogComponent {
    posts: Post[] = [];
    title: string = '';
    content: string = '';
  
    addPost() {
      const newPost: Post = { id: this.posts.length + 1, title: this.title, content: this.content };
      this.posts.push(newPost);
      this.title = '';
      this.content = '';
    }
  
    deletePost(id: number) {
      this.posts = this.posts.filter(post => post.id !== id);
    }
  }
  

---

3. Advanced Projects

3.1. E-commerce Website

• Description: Create a full-fledged e-commerce website with user authentication, product pages, and cart functionality.
• React Example:

  import React, { useState, useContext } from 'react';
  
  const CartContext = React.createContext();
  
  const ECommerceApp = () => {
      const [products] = useState([
          { id: 1, name: 'Product 1', price: 50 },
          { id: 2, name: 'Product 2', price: 100 }
      ]);
      const { cart, addToCart } = useContext(CartContext);
  
      return (
          <div>
              <h1>E-commerce Store</h1>
              <div>
                  {products.map(product => (
                      <div key={product.id}>
                          <h2>{product.name}</h2>
                          <p>${product.price}</p>
                          <button onClick={() => addToCart(product)}>Add to Cart</button>
                      </div>
                  ))}
              </div>
              <h2>Cart</h2>
              <ul>
                  {cart.map((product, index) => (
                      <li key={index}>{product.name} - ${product.price}</li>
                  ))}
              </ul>
          </div>
      );
  };
  
  const CartProvider = ({ children }) => {
      const [cart, setCart] = useState([]);
  
      const addToCart = (product) => {
          setCart([...cart, product]);
      };
  
      return (
          <CartContext.Provider value={{ cart, addToCart }}>
              {children}
          </CartContext.Provider>
      );
  };
  
  export default function App() {
      return (
          <CartProvider>
              <ECommerceApp />
          </CartProvider>
      );
  }
  

---

3.2. Social Media Dashboard

• Description: Create a dashboard that shows data analytics, posts, and comments from a social media API like Facebook or Twitter.
• Angular Example:

  import { Component } from '@angular/core';
  import { HttpClient } from '@angular/common/http';
  
  @Component({
    selector: 'app-dashboard',
    templateUrl: './dashboard.component.html',
    styleUrls: ['./dashboard.component.css']
  })
  export class DashboardComponent {
    posts = [];
    comments = [];
  
    constructor(private http: HttpClient) {
      this.http.get('https://jsonplaceholder.typicode.com/posts').subscribe(data => {
        this.posts = data;
      });
      this.http.get('https://jsonplaceholder.typicode.com/comments').subscribe(data => {
        this.comments = data;
      });
    }
  }
  

---

Conclusion

These are just a few examples of beginner to advanced projects you can build using React and Angular. The best way to improve is by working on real-world projects, integrating external APIs, and focusing on the UX/UI of your applications. Happy coding!