Skip to Content
Project

React Development

Overview

For this cumulative assessment on React, you will select and complete one of the following Frontend Mentor  challenges:

  1. IP Address Tracker: Build an application that tracks and displays the location of a given IP address using the IP Geolocation API by IPify  and LeafletJS  for map rendering.

  2. URL Shortening API Landing Page: Create a landing page that integrates with the bitly API  to shorten URLs, featuring a list of shortened links and the ability to copy them to the clipboard.

  3. REST Countries API with Color Theme Switcher: Develop an application that fetches data from the REST Countries API , displays country information, and includes a color theme switcher for light and dark modes.

The code, briefs, and images for each challenge are included within this module as well, for reference. You should use the material included with this module, just in case the challenges changes in scope or

This project aims to assess your ability to apply the skills and knowledge acquired throughout the course in a practical, real-world scenario. Choose the challenge that best aligns with your interests and strengths, and demonstrate your proficiency in front-end development. l notes.

Look Famililar?

If you have completed the HTML, CSS, and JavaScript modules with Per Scholas, you may be familiar with these project starters. As part of this project, you will be required to use React, but the project will be very similar to the projects you completed in the HTML, CSS, and JavaScript modules.

To challenge yourself, try to complete the project without using too much of the code from your previous projects. Or, if you are feeling ambitious, complete one (or both!) of the options you have not yet worked on.

⚠️

Make sure to carefully review the evaluation rubric for this project, as it differs greatly from the HTML, CSS, and JavaScript project rubric.

Project Requirements

  • Usage of React: You must use React for this project.
  • Responsive Design: Ensure the application is fully responsive across various devices and screen sizes.
  • API Integration: Effectively integrate the specified API to fetch and display data dynamically.
  • Interactivity: Implement interactive elements such as search functionality, form validation, and dynamic content updates.
  • Accessibility: Follow best practices to make the application accessible to all users.
  • Version Control: Use Git for version control, with regular commits and a well-documented GitHub repository.
  • Documentation: Include a comprehensive README.md file detailing the project setup, features, and any additiona

Getting Started

Start by reviewing each project’s description, brief, and associated images, then choose the challenge that aligns most with your skills and interests.

Once you’ve selected a project:

  • Download the starter files.
  • Initialize a git repository.
  • Plan your application structure.
  • Begin coding and implementing the project’s features.

Required Research

Each of the project options intentionally includes things you may not be familiar with, such as new APIs, new libraries, or new concepts. You will be required to research and learn about these new technologies throughout the project.

While the research requirements will vary depending on the project you select, you will absolutely need to research deployment as it is one of the required submission requirements below.

Deployment is the act of making a web application accessible on a public URL. It is a crucial step in the project process, as it allows you to share and test your work with others. We have included a [Required Reading] section on deployment within this module to get you started. You may review this material at any point during the project timeline.

Submission Requirements

  1. GitHub Repository:

    • Host your project on GitHub with all source code and assets.
    • Ensure the repository is public and includes a detailed README.md file.

  2. Live Demo:

    • Deploy your application using a platform like GitHub Pages, Netlify, or Vercel.
    • Provide a link to the live demo in your README.md file.

  3. Reflection Document:

    • Write a 200-300 word reflection discussing your development process, challenges faced, solutions implemented, and potential improvements.
    • Include this reflection in your GitHub repository.

Evaluation Criteria

CriteriaExcellentGoodSatisfactoryNeeds ImprovementIncomplete
Component Architecture
(15 points)		(13-15 points)
The application is well-composed of small, reusable functional components. Props are well-structured and typed with TypeScript. The children prop is used effectively for composition.		(10-12 points)
Components are mostly well-defined and reusable. Props are typed, but the structure could be improved.		(7-9 points)
A basic component structure is present, but components may be large and not very reusable. Prop usage is basic and may lack TypeScript types.		(1-6 points)
The application is monolithic, with poor use of components and props.		(0 points)
No component-based architecture is evident.
State Management
(20 points)		(17-20 points)
Excellent use of useState for local state, respecting immutability. Global state (Context API) is used effectively where appropriate (e.g., theme switcher).		(13-16 points)
useState is used correctly for most cases, but with minor issues in immutability or complex state. An opportunity to use the Context API may have been missed.		(9-12 points)
useState is used, but with some anti-patterns like direct state mutation. The distinction between local and global state is not clear.		(1-8 points)
State is poorly managed, leading to bugs or unpredictable UI behavior.		(0 points)
No state management is implemented.
Side Effects & Data Fetching
(15 points)		(13-15 points)
useEffect is used correctly for data fetching and other side effects. Dependencies are managed perfectly to prevent re-renders. Loading and error states are handled gracefully.		(10-12 points)
Data is fetched with useEffect, but the dependency array may have minor issues. Error and loading states are present but could be more robust.		(7-9 points)
useEffect is used for data fetching but may cause performance issues (e.g., infinite loops) or is used improperly.		(1-6 points)
Data fetching is implemented but is buggy, inefficient, or does not handle different states (loading, error).		(0 points)
No data fetching or side effects are managed.
Core React Features
(15 points)		(13-15 points)
Demonstrates mastery of rendering lists with stable keys, applying conditional rendering logically, and building forms with controlled components and proper event handling.		(10-12 points)
Good use of lists, conditional rendering, and forms, but with minor issues (e.g., using index as a key, minor form bugs).		(7-9 points)
A basic implementation of lists, conditional rendering, or forms is present, but with conceptual flaws.		(1-6 points)
Incorrect or missing implementation of these core features, indicating a lack of understanding.		(0 points)
None of these core features are implemented.
Code Reusability
(10 points)		(9-10 points)
Effectively identifies and extracts reusable logic into custom hooks, leading to a clean, modular, and maintainable codebase.		(7-8 points)
An attempt at creating custom hooks is made, but they may not be optimally designed or fully utilized.		(5-6 points)
Logic is repeated across components, indicating a missed opportunity for creating custom hooks. No custom hooks are created.		(1-4 points)
The code is highly repetitive and not modular, with no consideration for reusability.		(0 points)
No evidence of reusable code practices.
Responsive Design
(10 points)		(9-10 points)
The design is fully responsive and adjusts flawlessly across all screen sizes, including mobile, tablet, and desktop.		(7-8 points)
The design is mostly responsive, with only minor layout issues on certain screen sizes.		(5-6 points)
The design is partially responsive, but with noticeable layout issues on smaller or larger screens that affect usability.		(1-4 points)
The design is not responsive and has significant layout problems, severely affecting the user experience.		(0 points)
The design does not adapt to different screen sizes at all.
Project Best Practices
(15 points)		(13-15 points)
The GitHub repository has frequent, clear commits. The application is deployed and fully functional. The documentation and reflection are thorough and insightful.		(10-12 points)
Most best practices are followed, but with minor omissions in one or more areas (e.g., inconsistent commits, partial documentation).		(7-9 points)
A basic attempt is made at version control, deployment, and documentation, but with significant gaps that hinder understanding or usability.		(1-6 points)
Little to no effort in following project best practices, with major elements missing or incomplete.		(0 points)
No submission of one or more required items.

Total Score: ____ / 100 Points

Required Reading 1: Deploying Static Web Applications