ssam0419 / usthing_test

USThing Recruitment Test 1 (Frontend)

Introduction 💬

There are two parts in this test. In the first part, you will answer 3 simple coding questions in JavaScript or TypeScript. In the second part, you will make a simple event management website using React or Next.js. You may search the internet or other sources for references freely during this test. NodeJS installation is needed.

Tips 💡

Note that functionality and readability are equally important. So pay attention to your code structure and add comments whenever you think it's needed.

Feel free to ask our members if you have any questions 👍

Happy Coding! 🎊

P.S. Remember to submit the codingQuestion file together with the web wpp.

P.P.S. Please submit your answers even if you have not finished the tasks!!!!!

Restrictions ⛔

• You are not allowed to share/discuss any part of this test with anyone 😠
  • Once found, you will be immediately disqualified
  • We take integrity seriously here in USThing 😉
• You can only use JavaScript, TypeScript, React, or Next.js.

---

Part 1

In this part, you will answer 3 simple coding questions in JavaScript or TypeScript. Please type your answers into codingQuestion.js or codingQuestion.ts.

Question 1

Given an array of positive integer (e.g. [2, 5, 12, 4, 19, 73, ...]), return the sum of the array where the value is an odd number.

Question 2

Write a program which prints from 1 to 1000. When the number contains a digit that is a multiple of 3, print "three" instead.

Question 3

Given an array of integer (e.g. [2, -5, 12, 7, -7, -219, ...]), return the unique values in an array.

---

Part 2

Clone this repository and work on the following tasks. You can choose to write it in React or Next.js. Note that bonus points will be given to applicants writing in Next.js and TypeScript (a good and responsive design will also be a bonus).

React 😍

Create a new React app and work on the following tasks:

Task 1

1. Create a navbar which can navigate to different pages using Router
2. On the homepage, create a content slideshow with 5 random events from the API

Task 2

1. In the /server folder, install dependencies and start the API server.
2. Create a new page "events" with the following requirements:
   1. The events page contains a list of eventDesc.
   2. eventDesc is a reusable component that shows image of a single event, event name, and event description
   3. Get contents for eventDesc from the API and output it onto the events page.

Task 3

Use the API to create functional create, edit, and delete components for eventDesc.

Task 4

Design the web app to make it prettier

Next.js 😍

Create a new Next.js app and work on the following tasks:

Task 1

1. Create a navbar which can navigate to different pages
2. On the homepage, create a content slideshow with 5 random events from the API

Task 2

1. In the /server folder, install dependencies and start the API server.
2. Create a new page "events" with the following requirements:
   1. The events page contains a list of eventDesc.
   2. eventDesc is a reusable component that shows image of a single event, event name, and event description
   3. Get contents for eventDesc from the API and output it onto the events page.
   4. Fetch the data using server-side technique

Task 3

Use the API to create functional create, edit, and delete components for eventDesc.

Task 4

Design the web app to make it prettier

---

Resources 🤓

• A very simple ExpressJS API is included in this repo. You may add or modify the API to fit your needs if you wish so.
• You can find the API documentation here
• You can try-out the API using Postman
• You may use UI and animation libraries (Bootstrap, Bulma, anime.js, GSAP etc.) for the website design.