Scribd Logo
Upload

Welcome to Scribd!

  • 586 views

    Wings1 T1 Full-Stack Application (62638)

    Uploaded by

    Pushpendra Singh
    This document provides instructions for setting up a full-stack application with a Node.js backend and React frontend. It includes code to add routes for getting, enrolling in, rating, and dropping courses from a MongoDB database in the Node.js/Express backend. It also includes code for a React component to display course data, handle GET requests to get courses, and implement functions for applying to, rating, and dropping courses by calling the backend APIs. Users are instructed to copy and paste the code snippets into their project files and install dependencies and run the application.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd

    Wings1 T1 Full-Stack Application (62638)

    Uploaded by

    Pushpendra Singh
    586 views6 pages
    This document provides instructions for setting up a full-stack application with a Node.js backend and React frontend. It includes code to add routes for getting, enrolling in, rating, and dropping courses from a MongoDB database in the Node.js/Express backend. It also includes code for a React component to display course data, handle GET requests to get courses, and implement functions for applying to, rating, and dropping courses by calling the backend APIs. Users are instructed to copy and paste the code snippets into their project files and install dependencies and run the application.

    Copyright

    © © All Rights Reserved

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    This document provides instructions for setting up a full-stack application with a Node.js backend and React frontend. It includes code to add routes for getting, enrolling in, rating, and dropping courses from a MongoDB database in the Node.js/Express backend. It also includes code for a React component to display course data, handle GET requests to get courses, and implement functions for applying to, rating, and dropping courses by calling the backend APIs. Users are instructed to copy and paste the code snippets into their project files and install dependencies and run the application.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Download as txt, pdf, or txt
    586 views6 pages

    Wings1 T1 Full-Stack Application (62638)

    Uploaded by

    Pushpendra Singh
    This document provides instructions for setting up a full-stack application with a Node.js backend and React frontend. It includes code to add routes for getting, enrolling in, rating, and dropping courses from a MongoDB database in the Node.js/Express backend. It also includes code for a React component to display course data, handle GET requests to get courses, and implement functions for applying to, rating, and dropping courses by calling the backend APIs. Users are instructed to copy and paste the code snippets into their project files and install dependencies and run the application.

    Copyright:

    © All Rights Reserved
    Download as TXT, PDF, TXT or read online from Scribd
    Download as txt, pdf, or txt
    of 6
    At a glance
    Powered by AI
    The code is setting up routes for a course enrollment application using Node.js and MongoDB. It allows users to get course data, enroll in courses, rate courses, and drop courses.

    The code is defining routes to get all course data, enroll a user in a course, allow a user to rate a course, and allow a user to drop a course. It is making requests to the Course model in MongoDB.

    The App.js file is rendering course data fetched from the backend. It displays course details and conditionally shows buttons to enroll, rate, and drop courses based on the user's status. It also defines functions to make requests to the backend routes.

    Join our channel if you haven’t joined yet https://t.

    me/fresco_milestone
    ( @fresco_milestone )

    Wings1 T1 Mini-project - Full-Stack Application

    Open Project folder (you can find in desktop) in VS Code application

    Type below code in “/Desktop/Projects/wings.../Nodejs/routers/users.js” file:

    const express = require("express");


    const Course = require("../mongoose/models/courses");

    //setting up the student router


    const usersRouter = new express.Router();
    //write your code here

    usersRouter.get('/courses/get', async (req, res) => {


    const data = await Course.find()
    res.status(200).json(data)
    })
    usersRouter.post('/courses/enroll/:id', async (req, res) => {
    const id = req.params.id;
    const getData = await Course.findById(id)
    if (!getData.isApplied) {
    po = {
    isApplied: true
    }
    await Course.findByIdAndUpdate(id, po)
    res.status(200).json({ message: "Sucessfully” })
    } else {
    res.status(403).json({ message: "not" })

    }
    })

    usersRouter.patch('/courses/rating/:id', async (req, res) => {


    const id = req.params.id;
    const getData = await Course.findById(id)
    if (!getData.isRated && getData.isApplied) {
    const body = req.body;
    const noOfRatings = getData.noOfRatings + 1;
    const finalRate = (((getData.noOfRatings * getData.rating) + body.rating)
    / noOfRatings) .toFixed(1)
    pa = {
    isRated: true,
    rating: finalRate,
    Join our channel if you haven’t joined yet https://t.me/fresco_milestone
    ( @fresco_milestone )

    noOfRatings: noOfRatings

    }
    await Course. findByIdAndUpdate(id, pa)

    res.status(200).json({ message: "Sucessfully" })


    } else {
    res.status(403).json({ message: "Not" })

    }
    })

    usersRouter.delete('/courses/drop/:id', async (req, res) => {


    const id = req.params.id;
    const getData = await Course.findById(id)
    if (getData.isApplied) {
    de = {
    isApplied: false
    }
    await Course.findByIdAndUpdate(id, de)
    res.status(200).json({ message: "Sucessfully" })
    } else {
    res.status(403).json({ message: "Not" })

    }
    })

    module.exports = usersRouter;
    Type below code in “/Desktop/Projects/wings.../Reactis/src/App.js” file:

    import React, { Component } from ‘react’;


    import "./App.css"

    class Home extends Component {


    url = "http://localhost:8001/courses/"

    state = {
    show: false,
    data: [],
    rating: 1,
    }
    componentDidMount = () => {
    this. handleGetData()
    }

    handleGetData = () => f{
    Join our channel if you haven’t joined yet https://t.me/fresco_milestone
    ( @fresco_milestone )

    fetch(this.url + "get")
    .then((res) => res.json())
    -then((json) => {
    this.setState({ data: json })
    })
    }

    handleApply = async (id) => {


    const requestOption = {
    method: ‘post’,
    headers: { ‘Content-Type’: ‘application/json' }
    }3
    fetch(this.url + ‘'enroll/' + id, requestOption)
    -then(() => {
    this. handleGetData()
    })
    33

    handleRating = (e) => {


    this.setState({ rating: e.target.value })
    }

    handleAddRating = async (id) => {


    const requestOption = {
    method: ‘PATCH’,
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ rating: this.state.rating })
    }
    fetch(this.url + "rating/" + id, requestOption)
    -then(() => {
    this. handleGetData()
    })
    }

    handleDrop = async (id) => {


    const requestOption = {
    method: "DELETE',
    headers: { 'Content-Type': 'application/json' },
    3
    fetch(this.url + "drop/" + id, requestOption)
    -then(() => {
    this. handleGetData()

    })
    Join our channel if you haven’t joined yet https://t.me/fresco_milestone
    ( @fresco_milestone )

    render() {
    return (
    <div className="home">
    <header>
    <h2>ABC Learning</h2>
    </header>

    <div className="cardContainer">
    {this.state.data.map(courses => {
    return (
    <div className="card">
    <ul>
    <div className="header">
    <1li>{courses.courseName}</1i>
    <1i>{courses.courseDept}</1i>
    <li>{courses.description}</li>
    {courses.isApplied &&
    <li>
    {!courses.isRated &&
    <li>Rate:
    <select
    className="rating" name="rating" onChange={this.handleRating}>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    </select>
    <button className="rate"
    onClick={() => this.handleAddRating(courses._id)}>Add</button>
    </li>
    }
    {courses.isApplied &&
    <button className="drop"
    onClick={() => this.handleDrop(courses._id)}>Drop Course</button>

    </li>

    {!courses.isApplied &&
    <li><button className="btn"
    onClick={() => this.handleApply(courses._id)}>Apply</button></1i>
    }
    </div>
    <div className="footer">
    Join our channel if you haven’t joined yet https://t.me/fresco_milestone
    ( @fresco_milestone )

    <li>{courses.duration} hrs .
    {courses.noOfRatings} Ratings . {courses.rating}/5</li>
    </div>
    </ul>
    </div>
    )
    })}

    </div>
    </div>

    )3
    }

    export default Home

    Install project dependencies by usin command in the terminal and

    to run the application by using


    To test the application

    You might also like