├── .eslintrc.json
├── app
├── favicon.ico
├── layout.tsx
├── globals.css
└── page.tsx
├── next.config.mjs
├── postcss.config.js
├── .gitignore
├── tailwind.config.ts
├── public
├── vercel.svg
└── next.svg
├── package.json
├── tsconfig.json
└── README.md
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "next/core-web-vitals"
3 | }
4 |
--------------------------------------------------------------------------------
/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AntonioErdeljac/problem-1/HEAD/app/favicon.ico
--------------------------------------------------------------------------------
/next.config.mjs:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {};
3 |
4 | export default nextConfig;
5 |
--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | },
6 | };
7 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 | .yarn/install-state.gz
8 |
9 | # testing
10 | /coverage
11 |
12 | # next.js
13 | /.next/
14 | /out/
15 |
16 | # production
17 | /build
18 |
19 | # misc
20 | .DS_Store
21 | *.pem
22 |
23 | # debug
24 | npm-debug.log*
25 | yarn-debug.log*
26 | yarn-error.log*
27 |
28 | # local env files
29 | .env*.local
30 |
31 | # vercel
32 | .vercel
33 |
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 |
--------------------------------------------------------------------------------
/app/layout.tsx:
--------------------------------------------------------------------------------
1 | import type { Metadata } from "next";
2 | import { Inter } from "next/font/google";
3 | import "./globals.css";
4 |
5 | const inter = Inter({ subsets: ["latin"] });
6 |
7 | export const metadata: Metadata = {
8 | title: "Create Next App",
9 | description: "Generated by create next app",
10 | };
11 |
12 | export default function RootLayout({
13 | children,
14 | }: Readonly<{
15 | children: React.ReactNode;
16 | }>) {
17 | return (
18 |
19 | {children}
20 |
21 | );
22 | }
23 |
--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
1 | import type { Config } from "tailwindcss";
2 |
3 | const config: Config = {
4 | content: [
5 | "./pages/**/*.{js,ts,jsx,tsx,mdx}",
6 | "./components/**/*.{js,ts,jsx,tsx,mdx}",
7 | "./app/**/*.{js,ts,jsx,tsx,mdx}",
8 | ],
9 | theme: {
10 | extend: {
11 | backgroundImage: {
12 | "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
13 | "gradient-conic":
14 | "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
15 | },
16 | },
17 | },
18 | plugins: [],
19 | };
20 | export default config;
21 |
--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "problem-1",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "dev": "next dev",
7 | "build": "next build",
8 | "start": "next start",
9 | "lint": "next lint"
10 | },
11 | "dependencies": {
12 | "react": "^18",
13 | "react-dom": "^18",
14 | "next": "14.1.0"
15 | },
16 | "devDependencies": {
17 | "typescript": "^5",
18 | "@types/node": "^20",
19 | "@types/react": "^18",
20 | "@types/react-dom": "^18",
21 | "autoprefixer": "^10.0.1",
22 | "postcss": "^8",
23 | "tailwindcss": "^3.3.0",
24 | "eslint": "^8",
25 | "eslint-config-next": "14.1.0"
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "lib": ["dom", "dom.iterable", "esnext"],
4 | "allowJs": true,
5 | "skipLibCheck": true,
6 | "strict": true,
7 | "noEmit": true,
8 | "esModuleInterop": true,
9 | "module": "esnext",
10 | "moduleResolution": "bundler",
11 | "resolveJsonModule": true,
12 | "isolatedModules": true,
13 | "jsx": "preserve",
14 | "incremental": true,
15 | "plugins": [
16 | {
17 | "name": "next"
18 | }
19 | ],
20 | "paths": {
21 | "@/*": ["./*"]
22 | }
23 | },
24 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
25 | "exclude": ["node_modules"]
26 | }
27 |
--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | :root {
6 | --foreground-rgb: 0, 0, 0;
7 | --background-start-rgb: 214, 219, 220;
8 | --background-end-rgb: 255, 255, 255;
9 | }
10 |
11 | @media (prefers-color-scheme: dark) {
12 | :root {
13 | --foreground-rgb: 255, 255, 255;
14 | --background-start-rgb: 0, 0, 0;
15 | --background-end-rgb: 0, 0, 0;
16 | }
17 | }
18 |
19 | body {
20 | color: rgb(var(--foreground-rgb));
21 | background: linear-gradient(
22 | to bottom,
23 | transparent,
24 | rgb(var(--background-end-rgb))
25 | )
26 | rgb(var(--background-start-rgb));
27 | }
28 |
29 | @layer utilities {
30 | .text-balance {
31 | text-wrap: balance;
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # User Data Fetcher: A React Hook Exercise
2 |
3 | ## Overview
4 | This project is designed to help you practice building a React component that fetches and displays data from an external API. It's a hands-on way to get comfortable with using hooks such as `useState` and `useEffect`, managing asynchronous operations with `async/await`, and handling loading and error states in a React application.
5 |
6 | ## Objective
7 | Your task is to create a `UserData` component that:
8 | - Fetches user data from the following API endpoint: `https://jsonplaceholder.typicode.com/users/1`
9 | - Displays the user's name and email
10 | - Properly handles loading and error states
11 |
12 | ## Requirements
13 | - Use functional components and React hooks.
14 | - Implement the fetching of data within `useEffect` to ensure it's done when the component mounts.
15 | - Use `async/await` for the fetch operation.
16 | - Manage the state of the user data, loading status, and any potential errors with `useState`.
17 | - Ensure your component is reusable and well-structured.
18 |
19 | ## Getting Started
20 | 1. Clone this repository to your local machine.
21 | 2. Navigate to the project directory and install dependencies:
22 |
--------------------------------------------------------------------------------
/public/next.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/app/page.tsx:
--------------------------------------------------------------------------------
1 | "use client";
2 |
3 | /**
4 | * Problem: Fetch and Display Data Component
5 | *
6 | * Your task is to create a React component named `UserData` that fetches user data from a public API and displays the user's name and email.
7 | * The API endpoint to use is: https://jsonplaceholder.typicode.com/users/1
8 | *
9 | * Requirements:
10 | * 1. Fetch the user data from the API using the useEffect hook when the component mounts.
11 | * 2. Store the fetched data in state using the useState hook.
12 | * 3. Display the user's name and email in the component.
13 | * 4. Handle loading and error states appropriately.
14 | * 5. Use async/await for the fetch operation.
15 | *
16 | * You should write your solution in the designated sections below.
17 | * Good luck!
18 | */
19 |
20 | import React, { useState, useEffect } from 'react';
21 |
22 | const Home = () => {
23 | // Step 1: Define state for user data, loading, and error
24 | // Your code here
25 |
26 | useEffect(() => {
27 | // Step 2: Fetch user data from the API
28 | const fetchData = async () => {
29 | // Your code here: set loading state, fetch data, handle response, catch errors
30 | };
31 |
32 | fetchData();
33 | }, []); // Empty dependency array ensures this effect runs only once on mount
34 |
35 | // Step 3: Implement loading state handling
36 | // Your code here
37 |
38 | // Step 4: Implement error handling
39 | // Your code here
40 |
41 | // Step 5: Display user data (name and email)
42 | return (
43 |
44 | {/* Your code here: Conditionally render user data, loading message, or error message */}
45 |
46 | );
47 | }
48 |
49 | export default Home;
50 |
--------------------------------------------------------------------------------