IFQ666 React Web Assignment 1

Purpose

• This application is a React‑based web project created to fulfil the requirements of Assignment 1 for the IFQ666 course.
• It serves as a portfolio to showcase a developer’s resume, skills, projects, and experience in a visually appealing and user-friendly way, demonstrating both design and technical capabilities using React.

Contributing

Contributions from other developers who want to improve IFQ666 are welcome! Follow these steps to contribute effectively:

1. Fork the repository. Click the Fork button on Github to create your own copy of the project

2. Clone your fork

   git clone https://github.com/viettask/IFQ666_react_web_assignment1.git

3. Create a new branch for your feature or fix:

   git checkout -b feature-or-fix-name

4. Make your changes, and commit them with a meaningful message: Update README.md if needed

   git commit -m "Add <feature>/Fix <issue>"

5. Push your branch to your fork:

   git push origin feature-or-fix-name

6. Open a Pull Request (PR) against the main repository. The repository owner will review and merge once approved.

Features

1. Basic create-react-app setup with a focus on the assignment requirements.

2. Responsive Design: The website adapts to all screen sizes, ensuring an optimal user experience on both desktop and mobile devices.

3. Header with navigation bar menu: A simple and accessible menu allowing users to navigate between pages such as Home, About, Resume, Portfolio, Search, and Photos.

4. Footer: A consistent footer across all pages with email contact and legal information.

5. Pages:

   • Home Page: Includes a hero image and introduction text.

   • About Page: Personal information.

   • Resume Page: Displays a professional summary, career history, skills, and qualifications.

   • Portfolio Page: Showcases projects and creations, populated from Github API.

6. External API integration. The project uses multiple online APIs:

   • API #1 – Project/portfolio data (for dynamic population of the Portfolio page)
   • API #2 – Google Maps API via @react-google-maps/api (Used for location features and geolocation-based interactions)

Technologies Used

1. Core web technologies

   • HTML5 - structure and semantic layout
   • CSS3 - Styling, animations, responsive design
   • Javascript (ES6+) - logic, components, and API integration

2. Frontend Framework

   • React 18 - Component based UI development
   • React Router DOM 17 - Client-side routing for multiple pages

3. Styling & UI

   • Bootstrap 5 - layout and pre-built components
   • Lucide React - Icon library

4. APIs & Data fetching:

   • Axios - HTTP requests
   • @react-google-maps/api - Google Maps rendering + geolocation

5. Testing

   • React testing library
   • Jest DOM
   • User Event

6. Build Tools

   • Create React App (react-scripts)

Repository Structure

/IFQ666_react_web_assignment1 
├── src
│   ├── API                           # API components (Github, Google Maps Javascript, NewsAPI, PicSum) 
│   ├── assets                        # Public assets (icons, photos)
│   ├── features                      # Feature components
│   ├── pages                         # App pages (Home, About, Resume, Portfolio, Search, Photos)
│   ├── App.css                       # Global and component styles
│   ├── App.js                        # Main routing setup
│   ├── index.js                      # React entry point
├── LICENSE.txt                       # License file
├── package.json                      # Lists all project dependencies, scripts, and metadata for React
└── README.md

Project Setup

To run this project locally:

1. Clone the repository:

   git clone https://github.com/viettask/IFQ666_react_web_assignment1.git

2. Navigate into the project directory:

   cd IFQ666_react_web_assignment1

3. Install dependencies:

   npm install

4. Run the project:

   npm start

Acknowledgements

• Google Maps JavaScript API
• React documentation
• Bootstrap documentation
• Online public APIs for project data

License

This project is licensed under the MIT License.