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!

Comments

Post a Comment

Popular posts from this blog

PrimeNG tutorial with examples using frequently used classes

-
  PrimeNG Tutorial: Frequently Used Classes and Components PrimeNG is a comprehensive and flexible UI component library for Angular applications. It provides a wide range of ready-to-use components like forms, data tables, dialogs, buttons, and many others, all styled using Material Design principles. In this tutorial, we will explore some of the frequently used components and classes in PrimeNG , along with examples for creating interactive, modern, and responsive UIs. 1. Setting Up PrimeNG Before using PrimeNG components, you need to install PrimeNG in your Angular project. If you haven’t done so, follow these steps: Step 1: Install PrimeNG and PrimeIcons Run the following commands to install PrimeNG and PrimeIcons: bash Copy code npm install primeng npm install primeicons Step 2: Import Required Modules After installation, you need to import the relevant PrimeNG modules in your app.module.ts . Example of importing commonly used modules: typescript Copy code import { NgModule ...
Read more

Docker and Kubernetes Tutorials and QnA

-
 Docker and Kubernetes Tutorials: Detailed Guide Let's dive into detailed tutorials for Docker and Kubernetes, starting with their core concepts and progressing to hands-on examples. These tutorials are designed for both beginners and intermediate learners. Part 1: Docker Tutorial 1. Introduction to Docker Docker is a platform used to develop, ship, and run applications inside containers. Containers are lightweight, portable, and ensure consistent environments across different stages of the application lifecycle. They help solve the "works on my machine" problem. Key Concepts of Docker: Images : A blueprint for containers, containing everything needed to run an application (code, runtime, libraries, etc.). Containers : A runtime instance of an image, running isolated from the host system. Dockerfile : A script with a set of instructions to build Docker images. Docker Hub : A public repository of Docker images. Docker Compose : A tool to define and manage multi-container a...
Read more

oAuth in angular

-
 Implementing OAuth in an Angular application is a common requirement when you want to integrate with third-party services that require user authentication (e.g., Google, Facebook, GitHub) or enable Single Sign-On (SSO) across applications. OAuth allows users to authorize your app to access their data without sharing their credentials directly. In an Angular app, OAuth 2.0 is typically implemented using libraries like OAuth.js or Auth0 (for simpler management), or you can build the OAuth flow yourself. Below is a detailed guide on how OAuth 2.0 can be integrated into an Angular application using OAuth 2.0 with an identity provider and token handling. 1. Understand OAuth Flow OAuth 2.0 typically follows this flow: Authorization Code Flow : This is the most commonly used flow, which is secure and recommended for web applications. Implicit Flow : Used for client-side (JavaScript) applications, but not recommended anymore due to security concerns (e.g., exposing tokens in the URL)...
Read more