getpsyched6/adam-i

Adam-I Frontend, Japan Internship - Investing Platform (ReactJS)

Adam-i Frontend (Internship)

Development Workflow

• Before making a Pull Request (PR), run npm run postinstall to perform eslinting and prettier checks. Ensure checks pass before PR.
• PRs must only be made to the dev branch.
• After completing a milestone, merge dev to main, and then main to azure-main for cloud deployment.
• Use meaningful one-line summaries for your commit messages.
• Pull from the branch before each commit to minimize conflicts.
• Provide a summary and bullet points in the body of your PR.

Local Development

• Start the development server with npm run start; it will open at localhost:3000.
• Follow the Airbnb ESLint style guideline for code consistency.

Cloud Deployment

• Push to azure-main to trigger automatic CI/CD updates on the cloud. Monitor the process in the GitHub Actions tab.
• Use npx prisma studio for a web dashboard view of the database.

Guidelines and Configurations

• Ensure your Git configurations are set for case sensitivity and automatic rebasing.
• Run linting and formatting as part of your development routine.

Additional Notes

• Always ensure that no sensitive information is included in commits to the public repository.

adam-i's Issues

Fix Footer Links

Right now all the links in the footer link to facebook.com

Objectives:

• Track down all the correct social links and update the footer links
• Note down if any socials of the company in footer in unavailable

Download all non-local Unsplash Images and Compress them for use in the Website

• Right now, the images in Section Two (Why Invest in Africa) and Section Five (Industries) are direct links to Unsplash Images

• This is very slow. It slows down the image loading of the site by a ton. Instead we need to download them onto our repo, compress them, and import those images for use.

• The downloaded images must be placed in a logical place. (As in, in the assets folder in their respective folders)

Objectives:

• Open each Unsplash link for each image, and download the image (if possible - medium quality, not higher or lower)
• Open https://squoosh.app/ and paste the image in. Follow the settings in the image below exactly
• Set the left side as the original image, and the right side as WebP. 50% quality, 6 Effort. Do not turn anything else on. Click the blue download button
• Place all the new WebP images in the respective folders
• Import all new images into the repo and replace all the Unsplash links with them
• Test and ensure all the images work

Change Favicon to the Invest Africa Logo

• Right now, the Favicon (the icon in the browser tab) is the React Logo. It can be found in the public folder.

• Take the Invest Africa logo from the assets folder and make that the Favicon

Objectives:

• Take the Invest Africa Logo from the Assets folder
• Convert it to the .ico format
• Compress it to 5KB or less
• Replace the react logo favicon with the new Invest Africa logo.
• Place the new icon In the public folder. Replace the old favicon.ico

Country Page - Initial Design (High Fidelity)

Please take a look at this excel sheet, and come up with a general skeleton of the page structure, drawn on paper. (This is known as a lofi design)

NIGERIA COUNTRY PROFILE.xlsx

• Please note that this excel sheet has multiple pages. This shall be the main sections of the page.

• Good initial inspiration: https://www.investafrica.jp/nigeria/
• Other important inspiration given to us by the company is this page: https://www.trade.gov/country-commercial-guides/nigeria-trade-barriers?navcard=2539

---

Objectives:

• Create a high fidelity Figma design following the chosen Lofi design
• Create two versions, one for desktop, and one for mobile.
• Note down any potential issues you come across when trying to design it
• Ensure that the designs follow the style of the rest of the website.
• Try to ensure that the text isn't overwhelming to read or look at.

Country Page - Code the Hi-Fi Design in React (Namibia)

Please take a look at this excel sheet, and come up with a general skeleton of the page structure, drawn on paper. (This is known as a lofi design) [Please Find the Namibia Data Excel Sheet in your college email.]

NIGERIA COUNTRY PROFILE.xlsx

• Please note that this excel sheet has multiple pages. This shall be the main sections of the page.

• Good initial inspiration: https://www.investafrica.jp/namibia/
• Other important inspiration given to us by the company is this page: https://www.trade.gov/country-commercial-guides/nigeria-trade-barriers?navcard=2539

---

Objectives:

• In the pages folder, create the Namibia Country Page based on the HiFi Figma Design
• Ensure that the page is responsive.
• Note down any potential issues you come across when trying to design it
• Ensure that it matches the style of the rest of the website.
• Follow the Codebase Standards Documentation strictly
• Use the trade.gov site for inspiration
• Try to ensure that the text isn't overwhelming to read or look at.

Make Skip Navigation work on all pages

• Press tab after scrolling to the top and refreshing the site. you will see a skip navigation button

• What it does is for those who navigate the site through keyboard, it basically is a way to focus directly onto the first element on the page that isn't the navigation links. If you press tab normally, you will focus on all the nav links. If you press enter on skip nav, it will send you the first main content of the homepage, which is choose a country.

• But currently, this is hard-coded to go directly to choose a country, no matter which page you're in. Try pressing the skip navigation button in the login or registration pages, it won't work.

Objectives:

• Research the most optimal way to either dynamically set the link skip navigation goes it, or try to set it based on the current page
• Implement this method so that skip nav works on every page (Login, Home, Registrations - Both)
• Test it and ensure it works

Add Kevin Powell's Image CSS Reset to the Project Repo

• Visit this youtube link: https://www.youtube.com/watch?v=345V2MU3E_w

• Watch through the whole video, understand why these CSS properties could be beneficial to our project, and prepare to apply these properties to our repo.

Objectives:

• Open up src/reset.css
• Locate the img CSS block. it is already pre-exisiting.
• After understanding the point of each, add these new CSS properties (CSS Image Reset) to the img block
• Test and ensure that they work (if possible)

Country Page - Code the Hi-Fi Design in React (Nigeria)

Please take a look at this excel sheet, and come up with a general skeleton of the page structure, drawn on paper. (This is known as a lofi design)

NIGERIA COUNTRY PROFILE.xlsx

• Please note that this excel sheet has multiple pages. This shall be the main sections of the page.

• Good initial inspiration: https://www.investafrica.jp/nigeria/
• Other important inspiration given to us by the company is this page: https://www.trade.gov/country-commercial-guides/nigeria-trade-barriers?navcard=2539

---

Objectives:

• In the pages folder, create the Nigeria Country Page based on the HiFi Figma Design
• Ensure that the page is responsive.
• Note down any potential issues you come across when trying to design it
• Ensure that it matches the style of the rest of the website.
• Follow the Codebase Standards Documentation strictly
• Use the trade.gov site for inspiration
• Try to ensure that the text isn't overwhelming to read or look at.

Country Page - Code the Hi-Fi Design in React (Morocco)

Please take a look at this excel sheet, and come up with a general skeleton of the page structure, drawn on paper. (This is known as a lofi design) [Please Find the Morocco Data Excel Sheet in your college email.]

NIGERIA COUNTRY PROFILE.xlsx

• Please note that this excel sheet has multiple pages. This shall be the main sections of the page.

• Good initial inspiration: https://www.investafrica.jp/morocco/
• Other important inspiration given to us by the company is this page: https://www.trade.gov/country-commercial-guides/nigeria-trade-barriers?navcard=2539

---

Objectives:

• In the pages folder, create the Morocco Country Page based on the HiFi Figma Design
• Ensure that the page is responsive.
• Note down any potential issues you come across when trying to design it
• Ensure that it matches the style of the rest of the website.
• Follow the Codebase Standards Documentation strictly
• Use the trade.gov site for inspiration
• Try to ensure that the text isn't overwhelming to read or look at.

Country Page - Initial Low Fidelity Design

Please take a look at this excel sheet, and come up with a general skeleton of the page structure, drawn on paper. (This is known as a lofi design)

NIGERIA COUNTRY PROFILE.xlsx

• Please note that this excel sheet has multiple pages. This shall be the main sections of the page.

• Good initial inspiration: https://www.investafrica.jp/nigeria/
• Other important inspiration given to us by the company is this page: https://www.trade.gov/country-commercial-guides/nigeria-trade-barriers?navcard=2539

• The left side contains the tree navigation which lets us move between sections. Try following this pattern.
• You do not have to map all of the data from the excel pages in your lofi design, just give a general structure with some data.
• Think of resposivity, try following the mobile styles of the trade.gov site.

Objectives:

• Sketch a lofi design showing the main page with the left navigation, and each of its sub pages separately in their own lofi design pictures.
• Create two versions, one for desktop, and one for mobile.
• Note down any potential issues you come across when trying to design it
• Ensure that the sketches are neat and legible / presentable.
• Try to ensure that the text isn't overwhelming to read or look at.

Figure Out a Technique to Limit Full Name Field to These Conditions

• Right now the Full Name Field in the registration form accepts infinite spaces, numbers, symbols etc
• It should only allow letters, and one two spaces at most. But it should accept any language.

Objectives:

• Research methods of making an input field that validates based on these criteria
• It can be regex based or using Joi Validation
• Give a thorough explanation on why you have decided on your approach with proof of testing that it works on said criteria.
• Multiple Languages must.
• 2 Spaces Maximum
• No Symbols
• No Numbers

Country Page - Code the Hi-Fi Design in React (Kenya)

Please take a look at this excel sheet, and come up with a general skeleton of the page structure, drawn on paper. (This is known as a lofi design) [Please Find the Kenya Data Excel Sheet in your college email.]

NIGERIA COUNTRY PROFILE.xlsx

• Please note that this excel sheet has multiple pages. This shall be the main sections of the page.

• Good initial inspiration: https://www.investafrica.jp/kenya/
• Other important inspiration given to us by the company is this page: https://www.trade.gov/country-commercial-guides/nigeria-trade-barriers?navcard=2539

---

Objectives:

• In the pages folder, create the Kenya Country Page based on the HiFi Figma Design
• Ensure that the page is responsive.
• Note down any potential issues you come across when trying to design it
• Ensure that it matches the style of the rest of the website.
• Follow the Codebase Standards Documentation strictly
• Use the trade.gov site for inspiration
• Try to ensure that the text isn't overwhelming to read or look at.