Scribd
Upload
6 views2 pages

Create and Deploy a React App with Docker

This assignment requires students to create and host their first application using Node.js, React, Docker, and nginx by October 24, 2025. Students will identify a real-world problem to solve, utilize AI tools for coding assistance, and ensure their application runs successfully before submission. The project aims to enhance skills in web development, problem-solving, and deployment processes.

Uploaded by

derekaaaaaa
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views2 pages

Create and Deploy a React App with Docker

This assignment requires students to create and host their first application using Node.js, React, Docker, and nginx by October 24, 2025. Students will identify a real-world problem to solve, utilize AI tools for coding assistance, and ensure their application runs successfully before submission. The project aims to enhance skills in web development, problem-solving, and deployment processes.

Uploaded by

derekaaaaaa
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Level Up!

Due October 24, 2025 • 12:30 AM | 3 points possible

Instructions

Time to Level Up!


In this assignment, you will embark on an exciting journey to create your very first application and host it
using nginx with Docker. This project will not only enhance your technical skills but also allow you to apply
your creativity to solve real-world problems. Follow the detailed steps below to ensure you complete the task
successfully.

Steps to Complete the Assignment

1. Install [Link]
• Download [Link]: Visit [Link] and choose the version suitable for your OS. Follow the installation
prompts and check 'Add to PATH' if prompted.
• Verify Installation: Open Command Prompt or Terminal and type node -v to confirm [Link]
installation.

2. Create a Simple React Application


• Set Up Your React App: Use npx create-react-app my-app to create a new React application.
• Explore the Project Structure: Navigate to your app folder and open it in VS Code to explore files like
src/[Link] and public/[Link].

3. Identify a Problem to Solve


• Engage with Others: Ask family, friends, or classmates about their daily challenges.
• Brainstorm Solutions: Think creatively about how your app can help. Document your ideas.

4. Utilize AI Tools
• Research AI Tools: Explore tools like ChatGPT, GitHub Copilot, or Claude to assist with coding or
debugging.
• Incorporate Feedback: Use AI to improve your app, but always refine and understand the code it
generates.

5. Run and Test Your Application Locally


• Start Your Application: Run npm start to launch the app in a web browser.
• Test Functionality: Verify that all features work correctly and debug any console errors.

6. Build the Application for Production


• Prepare for Deployment: Run npm run build to create an optimized production build.
• Understand the Build Process: Explore the contents of the build/ folder to see what’s deployed.

7. Set Up Docker with Nginx


• Use Dockerfile to Serve the Application: Create a Dockerfile that copies your build folder into an
nginx container for hosting.

Submission
Complete All Steps: Make sure your app runs on nginx successfully.
Prepare Your Submission: Include your project files and a short write-up about the problem you solved.
Submit Your Work: Follow your teacher’s submission instructions carefully.

Learning Objectives
• Web Application Development: Gain hands-on experience creating a React application.
• Problem-Solving Skills: Identify real-world challenges and craft software-based solutions.
• Experience with AI Tools: Use AI to enhance your development workflow.
• Testing and Production Preparation: Learn to test and optimize for deployment.
• Docker and Nginx Hosting: Deploy apps professionally using Docker and nginx.

© 2025 IT404 — Web Development Foundations | Instructor: Tarek Chaaban

You might also like