├── 4_news_app
├── app
│ ├── (auth)
│ │ ├── user
│ │ │ ├── signup
│ │ │ │ ├── signup.module.css
│ │ │ │ └── page.tsx
│ │ │ └── login
│ │ │ │ ├── login.module.css
│ │ │ │ └── page.tsx
│ │ ├── layout.module.css
│ │ └── layout.tsx
│ ├── favicon.ico
│ ├── loading.tsx
│ ├── (main)
│ │ ├── page.tsx
│ │ ├── news-list
│ │ │ ├── layout.module.css
│ │ │ ├── [[...slug]]
│ │ │ │ ├── loading-deleted.tsx
│ │ │ │ ├── news-list.tsx
│ │ │ │ ├── not-found.tsx
│ │ │ │ ├── news-list.module.css
│ │ │ │ └── page.tsx
│ │ │ └── layout.tsx
│ │ ├── layout.tsx
│ │ ├── @latestus
│ │ │ └── page.tsx
│ │ ├── categories
│ │ │ └── page.tsx
│ │ ├── admin
│ │ │ └── page.tsx
│ │ ├── add-news
│ │ │ ├── add-article.module.css
│ │ │ └── page.tsx
│ │ ├── @latestgb
│ │ │ └── page.tsx
│ │ └── news
│ │ │ └── [slug]
│ │ │ ├── page.tsx
│ │ │ └── article.module.css
│ ├── not-found.tsx
│ ├── api
│ │ ├── news
│ │ │ ├── [slug]
│ │ │ │ └── route.ts
│ │ │ └── route.ts
│ │ ├── route.ts
│ │ └── auth
│ │ │ └── login
│ │ │ └── route.ts
│ ├── error.tsx
│ ├── layout.tsx
│ └── globals.css
├── components
│ ├── article-item
│ │ ├── article-item.module.css
│ │ └── ArticleItem.tsx
│ ├── categories
│ │ ├── categories.module.css
│ │ └── Categories.tsx
│ ├── latest-news
│ │ ├── item
│ │ │ ├── item.module.css
│ │ │ └── Item.tsx
│ │ ├── latest-news.module.css
│ │ └── LatestNews.tsx
│ ├── add-article
│ │ ├── SubmitArticle.tsx
│ │ ├── add-article.module.css
│ │ └── AddArticle.tsx
│ ├── hero
│ │ ├── Hero.tsx
│ │ └── hero.module.css
│ ├── header
│ │ ├── NavLink.tsx
│ │ ├── Header.tsx
│ │ └── header.module.css
│ ├── category
│ │ ├── Category.tsx
│ │ └── category.module.css
│ └── auth
│ │ └── login-form
│ │ └── login.module.css
├── news.db
├── public
│ ├── n1.jpg
│ ├── cat1.png
│ ├── cat2.png
│ ├── cat3.jpg
│ ├── logo.png
│ ├── cats
│ │ ├── gaza.webp
│ │ ├── finance.webp
│ │ ├── global.webp
│ │ ├── sports.webp
│ │ ├── weather.webp
│ │ ├── palestine.webp
│ │ └── westbank.webp
│ ├── vercel.svg
│ ├── images
│ │ ├── customer-accounts-officer.jpg
│ │ ├── corporate-communications-strategist.jpg
│ │ └── international-identity-orchestrator.jpg
│ ├── window.svg
│ ├── file.svg
│ ├── globe.svg
│ └── next.svg
├── .env
├── eslint.config.mjs
├── services
│ ├── auth.ts
│ └── news.service.ts
├── .gitignore
├── tsconfig.json
├── next.config.ts
├── constants
│ └── data.ts
├── package.json
├── types
│ └── index.d.ts
├── utils
│ └── auth.ts
├── README.md
├── middleware.ts
└── controllers
│ └── news-actions.ts
├── 1_Students App
├── src
│ ├── components
│ │ ├── courses-list
│ │ │ ├── courses-list.css
│ │ │ └── courses-list.component.tsx
│ │ ├── nav-bar
│ │ │ ├── nav-bar.css
│ │ │ └── nav-bar.component.tsx
│ │ ├── student
│ │ │ ├── student.css
│ │ │ └── student.component.tsx
│ │ ├── common
│ │ │ └── guarded-route
│ │ │ │ └── guarded-route.component.tsx
│ │ ├── courses-list-form
│ │ │ └── courses-list-form.component.tsx
│ │ ├── add-form
│ │ │ ├── add-form.css
│ │ │ └── add-form.component.tsx
│ │ └── absents
│ │ │ └── absents.component.tsx
│ ├── vite-env.d.ts
│ ├── screens
│ │ ├── NotFound.screen.tsx
│ │ ├── About.screen.tsx
│ │ ├── AddStudent.screen.tsx
│ │ ├── StudentDetails.screen.tsx
│ │ └── Login.screen.tsx
│ ├── @types.ts
│ ├── main.tsx
│ ├── utils
│ │ └── validation.ts
│ ├── providers
│ │ ├── authProvider.tsx
│ │ └── stateProvider.tsx
│ ├── hooks
│ │ └── local-storage.hook.ts
│ ├── App.tsx
│ ├── state
│ │ └── reducer.ts
│ ├── App.css
│ ├── index.css
│ └── assets
│ │ └── react.svg
├── tsconfig.json
├── vite.config.ts
├── .gitignore
├── index.html
├── tsconfig.node.json
├── tsconfig.app.json
├── package.json
├── eslint.config.js
├── public
│ └── vite.svg
└── README.md
├── 2_Todo App
├── src
│ ├── vite-env.d.ts
│ ├── components
│ │ ├── types.ts
│ │ ├── todo-list
│ │ │ ├── todo-list.css
│ │ │ └── todo-list.component.tsx
│ │ ├── form
│ │ │ ├── form.css
│ │ │ └── form.component.tsx
│ │ ├── dashboard
│ │ │ ├── dashboard.css
│ │ │ └── dashboard-component.tsx
│ │ └── todo-item
│ │ │ ├── todo-item.component.tsx
│ │ │ └── todo-item.css
│ ├── App.css
│ ├── hooks
│ │ └── local-storage.hook.ts
│ ├── main.tsx
│ ├── state
│ │ └── reducer.ts
│ ├── App.tsx
│ └── assets
│ │ └── react.svg
├── tsconfig.json
├── vite.config.ts
├── .gitignore
├── index.html
├── tsconfig.node.json
├── tsconfig.app.json
├── package.json
├── eslint.config.js
├── public
│ └── vite.svg
└── README.md
├── testing-ui
├── src
│ ├── vite-env.d.ts
│ ├── main.tsx
│ ├── App.css
│ ├── index.css
│ ├── App.tsx
│ └── assets
│ │ └── react.svg
├── tsconfig.json
├── vite.config.ts
├── .gitignore
├── index.html
├── tsconfig.node.json
├── tsconfig.app.json
├── package.json
├── eslint.config.js
├── public
│ └── vite.svg
└── README.md
├── memory-card-game
├── src
│ ├── vite-env.d.ts
│ ├── main.tsx
│ ├── screens
│ │ ├── not-found.screen.tsx
│ │ ├── game.screen.tsx
│ │ ├── screens.css
│ │ ├── levels.screen.tsx
│ │ └── score-board.screen.tsx
│ ├── components
│ │ ├── score-list
│ │ │ ├── score-list.css
│ │ │ └── score-list.tsx
│ │ ├── congrats
│ │ │ ├── congrats.tsx
│ │ │ └── congrats.css
│ │ ├── status-bar
│ │ │ ├── status-bar.css
│ │ │ └── status-bar.tsx
│ │ ├── card-list
│ │ │ ├── card-list.css
│ │ │ └── card-list.tsx
│ │ └── card
│ │ │ ├── card.tsx
│ │ │ └── card.css
│ ├── types
│ │ └── @types.ts
│ ├── utils
│ │ └── game.util.ts
│ ├── App.tsx
│ ├── providers
│ │ ├── modeProvider.tsx
│ │ └── reducer.ts
│ ├── App.css
│ └── hooks
│ │ └── game-logic.hook.ts
├── tsconfig.json
├── vite.config.ts
├── screens.txt
├── .gitignore
├── index.html
├── tsconfig.node.json
├── tsconfig.app.json
├── package.json
├── eslint.config.js
├── public
│ └── vite.svg
└── README.md
└── 3_next-example
├── app
├── favicon.ico
├── reach
│ ├── contact
│ │ └── page.tsx
│ ├── layout.module.css
│ ├── layout.tsx
│ ├── about
│ │ └── page.tsx
│ └── portfolio
│ │ └── page.tsx
├── page.module.css
├── page.tsx
├── globals.css
├── layout.tsx
└── antd
│ └── page.tsx
├── postcss.config.mjs
├── public
├── vercel.svg
├── window.svg
├── file.svg
├── globe.svg
└── next.svg
├── next.config.ts
├── tailwind.config.ts
├── components
├── Form.tsx
└── main-header
│ ├── main-header.module.css
│ └── MainHeader.tsx
├── eslint.config.mjs
├── .gitignore
├── tsconfig.json
├── package.json
└── README.md
/4_news_app/app/(auth)/user/signup/signup.module.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/4_news_app/components/article-item/article-item.module.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/1_Students App/src/components/courses-list/courses-list.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/2_Todo App/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// The page you requested doesn't exists
4 | )
5 | }
6 |
7 | export default NotFound;
--------------------------------------------------------------------------------
/1_Students App/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vite.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------
/2_Todo App/src/components/todo-list/todo-list.css:
--------------------------------------------------------------------------------
1 | .list-wrapper {
2 | border: 1px solid black;
3 | margin: 20px;
4 | padding: 10px;
5 | display: flex;
6 | flex-direction: column;
7 | row-gap: 10px;
8 | }
--------------------------------------------------------------------------------
/2_Todo App/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vite.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------
/testing-ui/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vite.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------
/memory-card-game/vite.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'vite'
2 | import react from '@vitejs/plugin-react'
3 |
4 | // https://vite.dev/config/
5 | export default defineConfig({
6 | plugins: [react()],
7 | })
8 |
--------------------------------------------------------------------------------
/4_news_app/app/loading.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const GlobalLoadingPage = () => {
4 | return (
5 |
6 |
Loading ...
7 |
8 | )
9 | }
10 |
11 | export default GlobalLoadingPage;
--------------------------------------------------------------------------------
/2_Todo App/src/App.css:
--------------------------------------------------------------------------------
1 | body {
2 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
3 | }
4 |
5 | h1 {
6 | font-size: 16px;
7 | }
8 |
9 | h1.light {
10 | color: #000;
11 | }
12 |
13 | h1.dark {
14 | color: #fff;
15 | }
--------------------------------------------------------------------------------
/3_next-example/tailwind.config.ts:
--------------------------------------------------------------------------------
1 | import type { Config } from 'tailwindcss'
2 |
3 | export default {
4 | content: [
5 | './app/**/*.{js,ts,jsx,tsx,mdx}'
6 | ],
7 | theme: {
8 | extend: {},
9 | },
10 | plugins: [],
11 | } satisfies Config
--------------------------------------------------------------------------------
/memory-card-game/src/components/score-list/score-list.css:
--------------------------------------------------------------------------------
1 | ul.score-list {
2 | list-style-type: none;
3 | padding: 0;
4 | margin: 0;
5 | text-align: left;
6 | }
7 |
8 | ul.score-list li {
9 | display: flex;
10 | justify-content: space-between;
11 | }
--------------------------------------------------------------------------------
/1_Students App/src/screens/NotFound.screen.tsx:
--------------------------------------------------------------------------------
1 | const NotFound = () => {
2 | return (
3 | <>
4 | Page Not found (404)
5 |
6 | We can't find the page you are looking for
7 |
8 |
9 | )
10 | }
11 |
12 | export default NotFound
--------------------------------------------------------------------------------
/3_next-example/app/reach/contact/page.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Form from '@/components/Form';
3 |
4 | const Contact = () => {
5 | return (
6 |
7 |
Contact Us
8 |
9 |
10 | )
11 | }
12 |
13 | export default Contact;
--------------------------------------------------------------------------------
/4_news_app/app/(main)/page.tsx:
--------------------------------------------------------------------------------
1 | import Hero from "@/components/hero/Hero";
2 | import Categories from "@/components/categories/Categories";
3 |
4 | export default function Home() {
5 | return (
6 |
7 |
10 | );
11 | }
12 |
--------------------------------------------------------------------------------
/testing-ui/src/main.tsx:
--------------------------------------------------------------------------------
1 | import { StrictMode } from 'react'
2 | import { createRoot } from 'react-dom/client'
3 | import './index.css'
4 | import App from './App.tsx'
5 |
6 | createRoot(document.getElementById('root')!).render(
7 |
8 | ,
10 | )
11 |
--------------------------------------------------------------------------------
/4_news_app/app/(main)/news-list/layout.module.css:
--------------------------------------------------------------------------------
1 | .layout {
2 | display: flex;
3 | align-items: stretch;
4 | column-gap: 30px;
5 | }
6 |
7 | .sideBar {
8 | min-height: 100vh;
9 | flex-basis: 25%;
10 | flex-shrink: 0;
11 | box-shadow: 0px 0px 1px #171a1f1F, 0px 0px 2px #171a1f1F;
12 | }
--------------------------------------------------------------------------------
/4_news_app/app/(auth)/layout.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import classes from './layout.module.css';
3 |
4 | export default function AuthLayout({ children }: Readonly<{ children: React.ReactNode; }>) {
5 | return (
6 |
7 | {children}
8 |
9 | );
10 | }
11 |
--------------------------------------------------------------------------------
/4_news_app/app/(main)/layout.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import Header from "@/components/header/Header";
3 |
4 | export default function MainLayout({ children }: Readonly<{ children: React.ReactNode; }>) {
5 | return (
6 |
7 |
8 | {children}
9 |
10 | );
11 | }
12 |
--------------------------------------------------------------------------------
/memory-card-game/src/components/congrats/congrats.tsx:
--------------------------------------------------------------------------------
1 | import './congrats.css'
2 |
3 | const Congrats = () => {
4 | return (
5 |
6 |
Congratulations You WON the game 🤑😛
7 |
You will be redirected to the ScoreBoard shortly
8 |
7 |
Signup to new account in GSG News APP
8 |
9 | )
10 | }
11 |
12 | export default Page;
--------------------------------------------------------------------------------
/4_news_app/app/(main)/news-list/[[...slug]]/loading-deleted.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import classes from './news-list.module.css';
3 |
4 | const NewLoadingPage = () => {
5 | return (
6 |
9 | )
10 | }
11 |
12 | export default NewLoadingPage;
--------------------------------------------------------------------------------
/3_next-example/components/Form.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const Form = () => {
4 | return (
5 |
12 | )
13 | }
14 |
15 | export default Form;
--------------------------------------------------------------------------------
/memory-card-game/screens.txt:
--------------------------------------------------------------------------------
1 | - Login Screen
2 | - Levels Screen
3 | - Level Component
4 | - Tutorial Component
5 | - Game Screen
6 | - Card Component
7 | - Cards List Component
8 | - Status Component (name, level, score, elapsed time, moves, retry)
9 | - Score Board
10 | - Score List Component
11 | - Score Item Component
12 | - Top 3 Component
13 |
14 |
--------------------------------------------------------------------------------
/2_Todo App/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/testing-ui/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/1_Students App/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/memory-card-game/.gitignore:
--------------------------------------------------------------------------------
1 | # Logs
2 | logs
3 | *.log
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | pnpm-debug.log*
8 | lerna-debug.log*
9 |
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 |
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 |
--------------------------------------------------------------------------------
/memory-card-game/src/types/@types.ts:
--------------------------------------------------------------------------------
1 | export enum ELevels {
2 | EASY = 2,
3 | MEDIUM = 4,
4 | HARD = 6
5 | }
6 |
7 | export interface ICard {
8 | id: number;
9 | image: string;
10 | visible: boolean;
11 | revealed: boolean;
12 | }
13 |
14 | export interface IScore {
15 | playerName: string;
16 | finishTime: number;
17 | wrongMoves: number;
18 | level: ELevels;
19 | }
--------------------------------------------------------------------------------
/1_Students App/src/components/courses-list/courses-list.component.tsx:
--------------------------------------------------------------------------------
1 |
2 | interface IProps {
3 | list: string[];
4 | }
5 |
6 | const CoursesList = (props: IProps) => {
7 | return (
8 |
9 | {
10 | props.list.map((item, index) => {item} )
11 | }
12 |
13 | )
14 | }
15 |
16 | export default CoursesList;
--------------------------------------------------------------------------------
/1_Students App/src/@types.ts:
--------------------------------------------------------------------------------
1 | export interface IStudent {
2 | id: string;
3 | name: string;
4 | age: number;
5 | absents: number;
6 | isGraduated: boolean;
7 | coursesList: string[];
8 | }
9 |
10 | export interface IUserData {
11 | userName: string;
12 | role: Role;
13 | }
14 |
15 | export enum Role {
16 | ADMIN = 'admin',
17 | Teacher = 'teacher',
18 | GUEST = 'guest'
19 | }
--------------------------------------------------------------------------------
/4_news_app/public/window.svg:
--------------------------------------------------------------------------------
1 | Vite + React + TS
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/4_news_app/app/(main)/news-list/layout.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import classes from './layout.module.css';
3 |
4 | export default function NewsLayout({
5 | children,
6 | }: Readonly<{
7 | children: React.ReactNode;
8 | }>) {
9 | return (
10 |
11 |
12 | side bar
13 |
14 | {children}
15 |
Vite + React + TS
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/1_Students App/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Vite + React + TS
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/memory-card-game/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Vite + React + TS
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/3_next-example/components/main-header/main-header.module.css:
--------------------------------------------------------------------------------
1 | .wrapper {
2 | display: flex;
3 | justify-content: space-between;
4 | background-color: aquamarine;
5 | padding: 20px 30px;
6 | }
7 |
8 | .main-nav>ul {
9 | display: flex;
10 | column-gap: 10px;
11 | list-style-type: none;
12 | padding: 0;
13 | margin: 0;
14 | }
15 |
16 | .main-nav>ul>li {
17 | padding: 0;
18 | margin: 10px 0;
19 | padding-right: 10px;
20 | border-right: 1px solid #aaa;
21 | }
--------------------------------------------------------------------------------
/4_news_app/components/categories/Categories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import classes from './categories.module.css';
3 | import Category from '../category/Category';
4 | import { CATEGORIES } from '@/constants/data';
5 |
6 | const Categories = () => {
7 | return (
8 |
9 | {
10 | CATEGORIES.map(cat =>
13 | )
14 | }
15 |
16 | export default Categories
--------------------------------------------------------------------------------
/2_Todo App/src/components/form/form.css:
--------------------------------------------------------------------------------
1 | .form-wrapper {
2 | margin: 20px;
3 | padding: 10px;
4 | display: flex;
5 | flex-direction: column;
6 | row-gap: 10px;
7 | }
8 |
9 | .form-wrapper .task-input {
10 | flex-basis: 100%;
11 | padding: 10px;
12 | }
13 |
14 | .form-wrapper .submit {
15 | padding: 10px;
16 | }
17 |
18 | .form-wrapper.light {
19 | border: 1px solid black;
20 | }
21 |
22 | .form-wrapper.dark {
23 | border: 1px solid white;
24 | color: white;
25 | }
--------------------------------------------------------------------------------
/3_next-example/eslint.config.mjs:
--------------------------------------------------------------------------------
1 | import { dirname } from "path";
2 | import { fileURLToPath } from "url";
3 | import { FlatCompat } from "@eslint/eslintrc";
4 |
5 | const __filename = fileURLToPath(import.meta.url);
6 | const __dirname = dirname(__filename);
7 |
8 | const compat = new FlatCompat({
9 | baseDirectory: __dirname,
10 | });
11 |
12 | const eslintConfig = [
13 | ...compat.extends("next/core-web-vitals", "next/typescript"),
14 | ];
15 |
16 | export default eslintConfig;
17 |
--------------------------------------------------------------------------------
/4_news_app/app/(main)/@latestus/page.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import LatestNews from '@/components/latest-news/LatestNews';
3 |
4 | import { fetchNews } from '@/services/news.service';
5 |
6 | const Page = async () => {
7 | const latestNews: News.Item[] = await fetchNews('politics', 'us') as News.Item[];
8 |
9 | return (
10 |
11 |
16 | )
17 | }
18 |
19 | export default Page;
--------------------------------------------------------------------------------
/4_news_app/app/(main)/categories/page.tsx:
--------------------------------------------------------------------------------
1 |
2 | import Categories from '@/components/categories/Categories';
3 | import { Metadata } from 'next';
4 | // import Link from 'next/link';
5 | import React from 'react';
6 |
7 | export const metadata: Metadata = {
8 | title: 'Categories!',
9 | description: 'GSG News website, News Categories!'
10 | }
11 |
12 | const Page = () => {
13 | return (
14 |
15 |
Categories Page
16 |
10 |
11 |
12 |
14 |
15 |
16 | )
17 |
--------------------------------------------------------------------------------
/1_Students App/src/screens/About.screen.tsx:
--------------------------------------------------------------------------------
1 | const About = () => {
2 | return (
3 |
4 |
About Students App
5 |
6 | This is an app that we use to explain topics of react in GSG training.
9 |
9 |
The page you are looking for is not found!
10 |
15 | {pending ? 'Submitting...' : 'Submit News'}
16 |
17 | )
18 | }
19 |
20 | export default SubmitArticle;
--------------------------------------------------------------------------------
/4_news_app/app/(main)/admin/page.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const Page = () => {
4 | return (
5 |
6 |
Admin Page
7 |
This is very important admin stuff, you need to have an admin role to see it.
8 |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, voluptatem cumque exercitationem, dolores, fugiat aspernatur rem hic incidunt maxime sit officia corporis eveniet quasi eligendi dicta natus aperiam. Velit, quaerat.
9 |
10 |
Add New Student
11 |
dispatch({ type: "ADD_STUDENT", payload: newStudent })} />
12 |
7 |
Stay Informed, Stay Ahead
8 |
Your go-to platform for the latest and most relevant news articles.
9 |
10 |
Post a News
11 |
Read News
12 | {/* outline */}
13 |
14 |
13 |
18 | )
19 | }
20 |
21 | export default Page;
--------------------------------------------------------------------------------
/4_news_app/app/(main)/news-list/[[...slug]]/news-list.tsx:
--------------------------------------------------------------------------------
1 | import { getNewsByCategory } from '@/services/news.service';
2 | import ArticleItem from '@/components/article-item/ArticleItem';
3 |
4 | const NewsList = async ({ category }: { category: string }) => {
5 | const latestNews: News.Item_[] = getNewsByCategory(category);
6 |
7 | return (
8 |
9 | {
10 | latestNews.map(item =>
)
11 | }
12 |
9 |
The country or category you are looking for doesn't exist!
10 |
12 |
Opps!!!
13 |
Something went wrong while processing your request!
14 |
You can props.reset()}>try again or window.location.reload()}>refresh the page later.
15 |
16 |
Contact the system administrator and provide the following info: {props.error.message}
17 |
12 | Level: {Array.from({ length: gameMode.level / 2 }).map(_ => '⭐')}
13 | Time: {gameMode.time}s
14 | Wrong Moves: {gameMode.wrongMoves}
15 |
16 | )
17 | }
18 |
19 | export default StatusBar;
--------------------------------------------------------------------------------
/3_next-example/components/main-header/MainHeader.tsx:
--------------------------------------------------------------------------------
1 | import Link from 'next/link';
2 | import React from 'react';
3 | import classes from './main-header.module.css';
4 |
5 | const MainHeader = () => {
6 | return (
7 |
8 |
First Next Example
9 |
10 |
11 |
12 |
14 |
15 |
17 |
18 |
19 |
7 |
Hello Next JS
8 |
This is is the first next js app
9 |
10 |
Latest News
11 |
12 |
13 |
15 |
16 |
18 |
19 |
20 |
14 |
Add News Page
15 |
Please fill all the required news data
16 |
17 |
13 |
20 | )
21 | }
22 |
23 | export default GameScreen;
--------------------------------------------------------------------------------
/4_news_app/app/(auth)/user/login/page.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import classes from "./login.module.css";
3 | import LoginForm from '@/components/auth/login-form/LoginForm';
4 |
5 | interface IProps {
6 | searchParams: Promise<{ msg: string }>;
7 | }
8 |
9 | const Page = async (props: IProps) => {
10 | const { msg } = (await props.searchParams);
11 |
12 | return (
13 |
14 |
{msg}
15 |
Welcome Back
16 |
Please enter your credentials to login
17 |
18 |
9 |
10 |
11 |
Quick News
12 |
13 |
14 | Home
15 | Add News
16 | Categories
17 | Admin
18 |
19 |
12 |
13 |
14 |
15 |
17 |
18 |
20 |
21 |
22 |
23 | {props.children}
24 |
25 |
13 |
14 |
15 |
17 |
{props.data.title}
18 |
{props.data.subtitle}
19 |
20 |
) => void;
8 | onDelete: (index: number) => void;
9 | }
10 |
11 | const TodoList = (props: IProps) => {
12 | return (
13 |
14 | {
15 | props.items.map((item, index) => (
16 | props.onDelete(index)}
21 | />
22 | ))
23 | }
24 |
25 | )
26 | }
27 |
28 | export default TodoList;
--------------------------------------------------------------------------------
/2_Todo App/tsconfig.app.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
4 | "target": "ES2020",
5 | "useDefineForClassFields": true,
6 | "lib": ["ES2020", "DOM", "DOM.Iterable"],
7 | "module": "ESNext",
8 | "skipLibCheck": true,
9 |
10 | /* Bundler mode */
11 | "moduleResolution": "bundler",
12 | "allowImportingTsExtensions": true,
13 | "isolatedModules": true,
14 | "moduleDetection": "force",
15 | "noEmit": true,
16 | "jsx": "react-jsx",
17 |
18 | /* Linting */
19 | "strict": true,
20 | "noUnusedLocals": true,
21 | "noUnusedParameters": true,
22 | "noFallthroughCasesInSwitch": true,
23 | "noUncheckedSideEffectImports": true
24 | },
25 | "include": ["src"]
26 | }
27 |
--------------------------------------------------------------------------------
/testing-ui/tsconfig.app.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
4 | "target": "ES2020",
5 | "useDefineForClassFields": true,
6 | "lib": ["ES2020", "DOM", "DOM.Iterable"],
7 | "module": "ESNext",
8 | "skipLibCheck": true,
9 |
10 | /* Bundler mode */
11 | "moduleResolution": "bundler",
12 | "allowImportingTsExtensions": true,
13 | "isolatedModules": true,
14 | "moduleDetection": "force",
15 | "noEmit": true,
16 | "jsx": "react-jsx",
17 |
18 | /* Linting */
19 | "strict": true,
20 | "noUnusedLocals": true,
21 | "noUnusedParameters": true,
22 | "noFallthroughCasesInSwitch": true,
23 | "noUncheckedSideEffectImports": true
24 | },
25 | "include": ["src"]
26 | }
27 |
--------------------------------------------------------------------------------
/memory-card-game/tsconfig.app.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
4 | "target": "ES2020",
5 | "useDefineForClassFields": true,
6 | "lib": ["ES2020", "DOM", "DOM.Iterable"],
7 | "module": "ESNext",
8 | "skipLibCheck": true,
9 |
10 | /* Bundler mode */
11 | "moduleResolution": "bundler",
12 | "allowImportingTsExtensions": true,
13 | "isolatedModules": true,
14 | "moduleDetection": "force",
15 | "noEmit": true,
16 | "jsx": "react-jsx",
17 |
18 | /* Linting */
19 | "strict": true,
20 | "noUnusedLocals": true,
21 | "noUnusedParameters": true,
22 | "noFallthroughCasesInSwitch": true,
23 | "noUncheckedSideEffectImports": true
24 | },
25 | "include": ["src"]
26 | }
27 |
--------------------------------------------------------------------------------
/testing-ui/src/App.css:
--------------------------------------------------------------------------------
1 | #root {
2 | max-width: 1280px;
3 | margin: 0 auto;
4 | padding: 2rem;
5 | text-align: center;
6 | }
7 |
8 | .logo {
9 | height: 6em;
10 | padding: 1.5em;
11 | will-change: filter;
12 | transition: filter 300ms;
13 | }
14 | .logo:hover {
15 | filter: drop-shadow(0 0 2em #646cffaa);
16 | }
17 | .logo.react:hover {
18 | filter: drop-shadow(0 0 2em #61dafbaa);
19 | }
20 |
21 | @keyframes logo-spin {
22 | from {
23 | transform: rotate(0deg);
24 | }
25 | to {
26 | transform: rotate(360deg);
27 | }
28 | }
29 |
30 | @media (prefers-reduced-motion: no-preference) {
31 | a:nth-of-type(2) .logo {
32 | animation: logo-spin infinite 20s linear;
33 | }
34 | }
35 |
36 | .card {
37 | padding: 2em;
38 | }
39 |
40 | .read-the-docs {
41 | color: #888;
42 | }
43 |
--------------------------------------------------------------------------------
/memory-card-game/src/components/score-list/score-list.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable @typescript-eslint/no-unused-vars */
2 | import { IScore } from '../../types/@types';
3 | import './score-list.css';
4 |
5 | interface IProps {
6 | scores: IScore[];
7 | }
8 | const ScoreList = (props: IProps) => {
9 | return (
10 |
11 | {
12 | props.scores.map((score, index) => (
13 |
14 | Name: {score.playerName}
15 | | Level: {Array.from({ length: score.level / 2 }).map(_ => '⭐')}
16 | | Time: {score.finishTime}
17 | | Wrong Moves: {score.wrongMoves}
18 |
19 | )
20 | )
21 | }
22 |
23 | )
24 | }
25 |
26 | export default ScoreList;
--------------------------------------------------------------------------------
/testing-ui/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "testing-ui",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "tsc -b && vite build",
9 | "lint": "eslint .",
10 | "preview": "vite preview"
11 | },
12 | "dependencies": {
13 | "react": "^19.0.0",
14 | "react-dom": "^19.0.0"
15 | },
16 | "devDependencies": {
17 | "@eslint/js": "^9.21.0",
18 | "@types/react": "^19.0.10",
19 | "@types/react-dom": "^19.0.4",
20 | "@vitejs/plugin-react": "^4.3.4",
21 | "eslint": "^9.21.0",
22 | "eslint-plugin-react-hooks": "^5.1.0",
23 | "eslint-plugin-react-refresh": "^0.4.19",
24 | "globals": "^15.15.0",
25 | "typescript": "~5.7.2",
26 | "typescript-eslint": "^8.24.1",
27 | "vite": "^6.2.0"
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/2_Todo App/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "todo-app",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "tsc -b && vite build",
9 | "lint": "eslint .",
10 | "preview": "vite preview"
11 | },
12 | "dependencies": {
13 | "@phosphor-icons/react": "^2.1.7",
14 | "react": "^18.3.1",
15 | "react-dom": "^18.3.1"
16 | },
17 | "devDependencies": {
18 | "@eslint/js": "^9.17.0",
19 | "@types/react": "^18.3.18",
20 | "@types/react-dom": "^18.3.5",
21 | "@vitejs/plugin-react": "^4.3.4",
22 | "eslint": "^9.17.0",
23 | "eslint-plugin-react-hooks": "^5.0.0",
24 | "eslint-plugin-react-refresh": "^0.4.16",
25 | "globals": "^15.14.0",
26 | "typescript": "~5.6.2",
27 | "typescript-eslint": "^8.18.2",
28 | "vite": "^6.0.5"
29 | }
30 | }
--------------------------------------------------------------------------------
/1_Students App/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "first-app",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "tsc -b && vite build",
9 | "lint": "eslint .",
10 | "preview": "vite preview"
11 | },
12 | "dependencies": {
13 | "react": "^18.3.1",
14 | "react-dom": "^18.3.1",
15 | "react-router-dom": "^7.1.1"
16 | },
17 | "devDependencies": {
18 | "@eslint/js": "^9.15.0",
19 | "@types/react": "^18.3.12",
20 | "@types/react-dom": "^18.3.1",
21 | "@vitejs/plugin-react": "^4.3.4",
22 | "eslint": "^9.15.0",
23 | "eslint-plugin-react-hooks": "^5.0.0",
24 | "eslint-plugin-react-refresh": "^0.4.14",
25 | "globals": "^15.12.0",
26 | "typescript": "~5.6.2",
27 | "typescript-eslint": "^8.15.0",
28 | "vite": "^6.0.1"
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/3_next-example/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "next-example",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "dev": "next dev --turbopack",
7 | "build": "next build",
8 | "start": "next start",
9 | "lint": "next lint"
10 | },
11 | "dependencies": {
12 | "@ant-design/icons": "^5.6.1",
13 | "@ant-design/nextjs-registry": "^1.0.2",
14 | "@tailwindcss/postcss": "^4.0.3",
15 | "antd": "^5.23.4",
16 | "next": "15.1.6",
17 | "postcss": "^8.5.1",
18 | "react": "^19.0.0",
19 | "react-dom": "^19.0.0",
20 | "tailwindcss": "^4.0.3"
21 | },
22 | "devDependencies": {
23 | "@eslint/eslintrc": "^3",
24 | "@types/node": "^20",
25 | "@types/react": "^19",
26 | "@types/react-dom": "^19",
27 | "eslint": "^9",
28 | "eslint-config-next": "15.1.6",
29 | "typescript": "^5"
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/memory-card-game/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "memory-card-game",
3 | "private": true,
4 | "version": "0.0.0",
5 | "type": "module",
6 | "scripts": {
7 | "dev": "vite",
8 | "build": "tsc -b && vite build",
9 | "lint": "eslint .",
10 | "preview": "vite preview"
11 | },
12 | "dependencies": {
13 | "react": "^18.3.1",
14 | "react-dom": "^18.3.1",
15 | "react-router-dom": "^7.1.3"
16 | },
17 | "devDependencies": {
18 | "@eslint/js": "^9.17.0",
19 | "@types/react": "^18.3.18",
20 | "@types/react-dom": "^18.3.5",
21 | "@vitejs/plugin-react": "^4.3.4",
22 | "eslint": "^9.17.0",
23 | "eslint-plugin-react-hooks": "^5.0.0",
24 | "eslint-plugin-react-refresh": "^0.4.16",
25 | "globals": "^15.14.0",
26 | "typescript": "~5.6.2",
27 | "typescript-eslint": "^8.18.2",
28 | "vite": "^6.0.5"
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/testing-ui/eslint.config.js:
--------------------------------------------------------------------------------
1 | import js from '@eslint/js'
2 | import globals from 'globals'
3 | import reactHooks from 'eslint-plugin-react-hooks'
4 | import reactRefresh from 'eslint-plugin-react-refresh'
5 | import tseslint from 'typescript-eslint'
6 |
7 | export default tseslint.config(
8 | { ignores: ['dist'] },
9 | {
10 | extends: [js.configs.recommended, ...tseslint.configs.recommended],
11 | files: ['**/*.{ts,tsx}'],
12 | languageOptions: {
13 | ecmaVersion: 2020,
14 | globals: globals.browser,
15 | },
16 | plugins: {
17 | 'react-hooks': reactHooks,
18 | 'react-refresh': reactRefresh,
19 | },
20 | rules: {
21 | ...reactHooks.configs.recommended.rules,
22 | 'react-refresh/only-export-components': [
23 | 'warn',
24 | { allowConstantExport: true },
25 | ],
26 | },
27 | },
28 | )
29 |
--------------------------------------------------------------------------------
/memory-card-game/eslint.config.js:
--------------------------------------------------------------------------------
1 | import js from '@eslint/js'
2 | import globals from 'globals'
3 | import reactHooks from 'eslint-plugin-react-hooks'
4 | import reactRefresh from 'eslint-plugin-react-refresh'
5 | import tseslint from 'typescript-eslint'
6 |
7 | export default tseslint.config(
8 | { ignores: ['dist'] },
9 | {
10 | extends: [js.configs.recommended, ...tseslint.configs.recommended],
11 | files: ['**/*.{ts,tsx}'],
12 | languageOptions: {
13 | ecmaVersion: 2020,
14 | globals: globals.browser,
15 | },
16 | plugins: {
17 | 'react-hooks': reactHooks,
18 | 'react-refresh': reactRefresh,
19 | },
20 | rules: {
21 | ...reactHooks.configs.recommended.rules,
22 | 'react-refresh/only-export-components': [
23 | 'warn',
24 | { allowConstantExport: true },
25 | ],
26 | },
27 | },
28 | )
29 |
--------------------------------------------------------------------------------
/4_news_app/components/category/category.module.css:
--------------------------------------------------------------------------------
1 | .wrapper {
2 | position: relative;
3 | width: 330px;
4 | margin: 5px;
5 | background: #FFF;
6 | border-radius: 2px;
7 | box-shadow: 0 0 5px 0px #171a1f7d, 0 0 2px #171a1f38;
8 | display: flex;
9 | flex-direction: column;
10 | row-gap: 10px;
11 | padding-bottom: 10px;
12 | }
13 |
14 | .wrapper a {
15 | text-decoration: none;
16 | }
17 |
18 | .title {
19 | font-family: var(--font-mulish);
20 | font-size: 18px;
21 | font-weight: 700;
22 | color: #9095A0FF;
23 | margin: 0;
24 | padding: 0 10px;
25 | }
26 |
27 | .latest {
28 | font-family: var(--font-mulish);
29 | font-size: 16px;
30 | font-weight: 400;
31 | color: #9095A0FF;
32 | margin: 0;
33 | padding: 0 10px;
34 | }
35 |
36 | .banner {
37 | position: relative;
38 | width: 100%;
39 | height: 160px;
40 | }
41 |
42 | .banner img {
43 | object-fit: cover;
44 | }
--------------------------------------------------------------------------------
/memory-card-game/src/components/card/card.tsx:
--------------------------------------------------------------------------------
1 | import { Action } from '../../providers/reducer';
2 | import { ICard } from '../../types/@types';
3 | import './card.css';
4 |
5 | interface IProps {
6 | data: ICard;
7 | index: number;
8 | dispatch: React.Dispatch;
9 | }
10 |
11 | const Card = (props: IProps) => {
12 | const handleFlip = () => {
13 | props.dispatch({ type: 'flip-card', payload: { id: props.data.id, index: props.index } });
14 | }
15 |
16 | return (
17 |
29 | )
30 | }
31 |
32 | export default Card;
--------------------------------------------------------------------------------
/2_Todo App/src/hooks/local-storage.hook.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useState } from "react";
2 |
3 | const useLocalStorage = (state: any, storageKey: string) => {
4 | const [storedData, setStoredData] = useState();
5 |
6 | useEffect(() => {
7 | // Read the data on the first render
8 | const strData = localStorage.getItem(storageKey);
9 | try {
10 | if (strData !== null) {
11 | setStoredData(JSON.parse(strData));
12 | } else {
13 | setStoredData(null);
14 | }
15 | } catch {
16 | setStoredData(strData);
17 | }
18 | }, []);
19 |
20 | useEffect(() => {
21 | if (typeof (state) === 'object') {
22 | localStorage.setItem(storageKey, JSON.stringify(state));
23 | } else {
24 | localStorage.setItem(storageKey, state.toString());
25 | }
26 | }, [state, storageKey]);
27 |
28 | return { storedData };
29 | }
30 |
31 | export default useLocalStorage;
--------------------------------------------------------------------------------
/memory-card-game/src/components/card-list/card-list.tsx:
--------------------------------------------------------------------------------
1 | import { ICard } from '../../types/@types';
2 | import Card from '../card/card';
3 | import './card-list.css';
4 | import { Action } from '../../providers/reducer';
5 | import { useContext } from 'react';
6 | import { GameModeContext } from '../../providers/modeProvider';
7 |
8 | interface IProps {
9 | cards: ICard[];
10 | dispatch: React.Dispatch;
11 | }
12 |
13 | const CardList = (props: IProps) => {
14 | const { gameMode } = useContext(GameModeContext);
15 |
16 | return (
17 |
18 | {
19 | props.cards.map((card, index) => (
20 |
29 | )
30 | }
31 |
32 | export default CardList;
--------------------------------------------------------------------------------
/2_Todo App/eslint.config.js:
--------------------------------------------------------------------------------
1 | import js from '@eslint/js'
2 | import globals from 'globals'
3 | import reactHooks from 'eslint-plugin-react-hooks'
4 | import reactRefresh from 'eslint-plugin-react-refresh'
5 | import tseslint from 'typescript-eslint'
6 |
7 | export default tseslint.config(
8 | { ignores: ['dist'] },
9 | {
10 | extends: [js.configs.recommended, ...tseslint.configs.recommended],
11 | files: ['**/*.{ts,tsx}'],
12 | languageOptions: {
13 | ecmaVersion: 2020,
14 | globals: globals.browser,
15 | },
16 | plugins: {
17 | 'react-hooks': reactHooks,
18 | 'react-refresh': reactRefresh,
19 | },
20 | rules: {
21 | ...reactHooks.configs.recommended.rules,
22 | '@typescript-eslint/no-explicit-any': 'warn',
23 | 'react-refresh/only-export-components': [
24 | 'warn',
25 | { allowConstantExport: true },
26 | ],
27 | },
28 | },
29 | )
30 |
--------------------------------------------------------------------------------
/2_Todo App/src/main.tsx:
--------------------------------------------------------------------------------
1 | import { createRoot } from 'react-dom/client'
2 | import App from './App.tsx'
3 | import { createContext, useEffect, useState } from 'react'
4 |
5 |
6 | interface IContextState {
7 | theme: string,
8 | setTheme: React.Dispatch>
9 | }
10 |
11 | const storedTheme = localStorage.getItem('theme');
12 | const DEFAULT_THEME = storedTheme || 'light';
13 |
14 | export const ThemeContext = createContext({ theme: DEFAULT_THEME, setTheme: () => { } });
15 |
16 | const WrapperComponent = () => {
17 | const [theme, setTheme] = useState(DEFAULT_THEME);
18 |
19 | useEffect(() => {
20 | localStorage.setItem('theme', theme);
21 | }, [theme]);
22 |
23 | return (
24 |
25 |
27 | )
28 | }
29 |
30 | createRoot(document.getElementById('root')!).render(
31 |
6 |
About App
7 |
8 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam assumenda fugit, ut alias sunt reiciendis facere voluptates laboriosam possimus pariatur, delectus commodi quibusdam corrupti! Quam porro iste dolore temporibus voluptatum.
9 | Magni ipsum veniam temporibus sit modi necessitatibus atque, dolore commodi veritatis cupiditate doloremque accusantium. Praesentium commodi tempore et animi, temporibus eligendi natus sequi, ipsa veniam, maxime voluptas aperiam asperiores quibusdam?
10 | Porro magni amet maxime recusandae explicabo sed. Ducimus quos cupiditate, animi et, alias accusamus inventore minima soluta molestias cumque repellat nobis nam. Debitis nisi aliquam nulla sit? Quo, repudiandae atque?
11 |
12 |
{children}
28 |
29 |
30 | );
31 | }
32 |
--------------------------------------------------------------------------------
/4_news_app/constants/data.ts:
--------------------------------------------------------------------------------
1 | const CATEGORIES: News.ICategory[] = [
2 | {
3 | title: 'finance',
4 | imageURL: '/cats/finance.webp',
5 | subtitle: ''
6 | },
7 | {
8 | title: 'gaza',
9 | imageURL: '/cats/gaza.webp',
10 | subtitle: ''
11 | },
12 | {
13 | title: 'global',
14 | imageURL: '/cats/global.webp',
15 | subtitle: ''
16 | },
17 | {
18 | title: 'palestine',
19 | imageURL: '/cats/palestine.webp',
20 | subtitle: ''
21 | },
22 | {
23 | title: 'sports',
24 | imageURL: '/cats/sports.webp',
25 | subtitle: ''
26 | },
27 | {
28 | title: 'weather',
29 | imageURL: '/cats/weather.webp',
30 | subtitle: ''
31 | },
32 | {
33 | title: 'westbank',
34 | imageURL: '/cats/westbank.webp',
35 | subtitle: ''
36 | }
37 | ];
38 |
39 | const ALLOWED_CATEGORIES = [
40 | 'global',
41 | 'palestine',
42 | 'gaza',
43 | 'finance',
44 | 'westbank',
45 | 'weather',
46 | 'sports',
47 | ]
48 |
49 | export { CATEGORIES, ALLOWED_CATEGORIES };
--------------------------------------------------------------------------------
/4_news_app/public/globe.svg:
--------------------------------------------------------------------------------
1 |
21 |
You must be logged in to see this screen!
22 |
28 |
You don't have sufficient permissions to see this screen!
29 |
30 | );
31 | }
32 |
33 | return props.children;
34 | }
35 |
36 | export default Guarded;
--------------------------------------------------------------------------------
/4_news_app/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "4_news_app",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "dev": "next dev --turbopack",
7 | "build": "next build",
8 | "start": "next start",
9 | "lint": "next lint"
10 | },
11 | "dependencies": {
12 | "@phosphor-icons/react": "^2.1.7",
13 | "bcryptjs": "^3.0.2",
14 | "better-sqlite3": "^11.8.1",
15 | "classnames": "^2.5.1",
16 | "jose": "^6.0.10",
17 | "jsonwebtoken": "^9.0.2",
18 | "next": "15.1.6",
19 | "react": "^19.0.0",
20 | "react-dom": "^19.0.0",
21 | "react-toastify": "^11.0.5",
22 | "slugify": "^1.6.6",
23 | "xss": "^1.0.15"
24 | },
25 | "devDependencies": {
26 | "@eslint/eslintrc": "^3",
27 | "@types/bcryptjs": "^3.0.0",
28 | "@types/better-sqlite3": "^7.6.12",
29 | "@types/jsonwebtoken": "^9.0.9",
30 | "@types/node": "^20",
31 | "@types/react": "^19",
32 | "@types/react-dom": "^19",
33 | "eslint": "^9",
34 | "eslint-config-next": "15.1.6",
35 | "typescript": "^5"
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/4_news_app/types/index.d.ts:
--------------------------------------------------------------------------------
1 | declare namespace News {
2 | export interface IResponseNewsItem {
3 | article_id: string;
4 | description: string;
5 | title: string;
6 | image_url: string;
7 | }
8 |
9 | export interface IResponse {
10 | status: string;
11 | totalResults: string;
12 | results: IResponseNewsItem[];
13 | }
14 |
15 | export interface Item {
16 | id: string;
17 | title: string;
18 | img: string | null;
19 | content: string;
20 | }
21 |
22 | export interface ICategory {
23 | title: string;
24 | subtitle: string;
25 | imageURL: string;
26 | }
27 |
28 | export interface Item_ {
29 | id?: string;
30 | title: string;
31 | slug: string;
32 | image: string;
33 | summary: string;
34 | content: string;
35 | author: string;
36 | author_email: string;
37 | date: number;
38 | category: string;
39 | }
40 |
41 | export interface IUser {
42 | email: string;
43 | password?: string;
44 | role: string;
45 | displayName: string;
46 | }
47 | }
--------------------------------------------------------------------------------
/memory-card-game/src/App.tsx:
--------------------------------------------------------------------------------
1 | import { createBrowserRouter, RouteObject, RouterProvider } from 'react-router-dom';
2 | import './App.css'
3 | import GameScreen from './screens/game.screen';
4 | import LevelsScreen from './screens/levels.screen';
5 | import ScoreBoardScreen from './screens/score-board.screen';
6 | import NotFound from './screens/not-found.screen';
7 | import { GameModeProvider } from './providers/modeProvider';
8 |
9 | function App() {
10 | const routes: RouteObject[] = [
11 | {
12 | path: '/',
13 | element:
33 |
35 | )
36 | }
37 |
38 | export default App;
39 |
--------------------------------------------------------------------------------
/4_news_app/components/latest-news/item/Item.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import classes from './item.module.css';
3 | import Image from 'next/image';
4 |
5 | interface IProps {
6 | isHighlighted: boolean;
7 | data: News.Item;
8 | }
9 |
10 | const Item = (props: IProps) => {
11 | const item = props.data;
12 |
13 | return (
14 |
15 |
{item.title?.substring(0, 95)}
16 |
17 | {
18 |
26 |
{item.content?.substring(0, 150)}...
27 |
22 |
23 | {props.items.length}
24 | Created Tasks
25 |
26 |
27 | {urgentCount}
28 | Urgent Tasks
29 |
30 |
31 | {completedCount}
32 | Completed Tasks
33 |
34 |
{item.title?.substring(0, 95)}
18 |
19 | {
20 |
28 | {item.summary}
29 |
30 | )
31 | }
32 |
33 | export default ArticleItem;
--------------------------------------------------------------------------------
/4_news_app/app/api/news/route.ts:
--------------------------------------------------------------------------------
1 | import { ALLOWED_CATEGORIES } from "@/constants/data";
2 | import { getNewsByCategory } from "@/services/news.service";
3 | import { NextRequest, NextResponse } from "next/server";
4 |
5 | const GET = async (request: NextRequest) => {
6 | const params = request.nextUrl.searchParams;
7 | const category = params.get('category') || 'global';
8 |
9 | if (!ALLOWED_CATEGORIES.includes(category)) {
10 | return NextResponse.json(null, { status: 400, statusText: "Unknown category" });
11 | }
12 |
13 | const news = getNewsByCategory(category);
14 | return NextResponse.json(
15 | { results: news },
16 | { status: 200 }
17 | );
18 | }
19 |
20 | const POST = async (request: NextRequest) => {
21 | const body = await request.json();
22 | console.log(body);
23 | return NextResponse.json({
24 | msg: "Item Added"
25 | }, {
26 | status: 201,
27 | // headers: {
28 | // 'Access-Control-Allow-Origin': '*',
29 | // 'Access-Control-Allow-Methods': 'GET',
30 | // 'Access-Control-Allow-Headers': 'Content-Type, Authorization',
31 | // },
32 | });
33 | }
34 |
35 | export {
36 | GET, POST
37 | }
--------------------------------------------------------------------------------
/memory-card-game/src/providers/modeProvider.tsx:
--------------------------------------------------------------------------------
1 | import { createContext, useState } from "react";
2 | import { ELevels } from "../types/@types";
3 |
4 | export interface IGameMode {
5 | playerName: string;
6 | level: ELevels;
7 | finished: boolean;
8 | time: number;
9 | wrongMoves: number;
10 | }
11 |
12 | export interface IGameModeContext {
13 | gameMode: IGameMode;
14 | setGameMode: React.Dispatch>;
15 | resetGame: () => void;
16 | }
17 |
18 | const INIT_STATE: IGameMode = { playerName: '', level: ELevels.EASY, finished: false, time: 0, wrongMoves: 0 };
19 |
20 | export const GameModeContext = createContext(
21 | { gameMode: INIT_STATE, setGameMode: () => { }, resetGame: () => { } }
22 | );
23 |
24 | export const GameModeProvider = (props: { children: React.ReactNode }) => {
25 | const [gameMode, setGameMode] = useState(INIT_STATE);
26 |
27 | const resetGame = () => {
28 | setGameMode(old => ({ ...INIT_STATE, level: old.level, playerName: old.playerName }));
29 | }
30 |
31 | return {props.children}
32 | }
--------------------------------------------------------------------------------
/4_news_app/components/latest-news/LatestNews.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 | import React, { useEffect, useState } from 'react';
3 | import classes from './latest-news.module.css';
4 | import Item from './item/Item';
5 |
6 | interface IProps {
7 | subTitle?: string;
8 | newsList: News.Item[];
9 | }
10 |
11 | const LatestNews = (props: IProps) => {
12 | const [highlightedIndex, setHighlightedIndex] = useState(0);
13 |
14 | useEffect(() => {
15 | const sliderInt = setInterval(() => {
16 | setHighlightedIndex(old => (old + 1) % 3);
17 | }, 3000);
18 |
19 | return () => {
20 | clearInterval(sliderInt);
21 | }
22 | }, []);
23 |
24 | return (
25 |
26 |
Latest News Articles
27 | {props.subTitle &&
{props.subTitle} }
28 |
29 | {
30 | props.newsList.map((data, index) => (
31 |
39 |
=> {
25 | try {
26 | const { payload } = await jose.jwtVerify(token, new TextEncoder().encode(JWT_SECRET));
27 | return payload as unknown as News.IUser;
28 | } catch (err) {
29 | console.log(err);
30 | return null;
31 | }
32 | }
33 |
34 | export {
35 | comparePassword,
36 | hashPassword,
37 | generateToken,
38 | verifyToken
39 | }
--------------------------------------------------------------------------------
/1_Students App/src/providers/authProvider.tsx:
--------------------------------------------------------------------------------
1 | import { createContext, useLayoutEffect, useState } from "react";
2 | import { IUserData } from "../@types";
3 | import useLocalStorage from "../hooks/local-storage.hook";
4 |
5 | export interface IAuthContext {
6 | user: IUserData | null;
7 | loading: boolean;
8 | login: (data: IUserData) => void;
9 | logout: () => void;
10 | }
11 |
12 | export const AuthContext = createContext({ user: null, login: () => { }, logout: () => { }, loading: true });
13 |
14 | export const AuthProvider = (props: { children: React.ReactNode }) => {
15 | const [user, setUser] = useState(null);
16 | const { storedData, loading } = useLocalStorage(user, 'auth-user');
17 |
18 | useLayoutEffect(() => {
19 | if (!loading) {
20 | setUser(storedData);
21 | }
22 | }, [storedData, loading]);
23 |
24 | const login = (data: IUserData) => {
25 | if (data.userName.length >= 3) {
26 | setUser(data);
27 | } else {
28 | setUser(null);
29 | }
30 | }
31 |
32 | const logout = () => {
33 | setUser(null);
34 | }
35 |
36 | const data = { user, loading, login, logout };
37 |
38 | return {props.children} ;
39 | };
--------------------------------------------------------------------------------
/2_Todo App/src/components/todo-item/todo-item.component.tsx:
--------------------------------------------------------------------------------
1 | import { Trash } from '@phosphor-icons/react';
2 | import './todo-item.css'
3 | import { ITodoItem } from '../types';
4 | import { useContext } from 'react';
5 | import { ThemeContext } from '../../main';
6 |
7 | interface IProps {
8 | data: ITodoItem
9 | onToggle: (e: React.ChangeEvent) => void
10 | onDelete: () => void
11 | };
12 |
13 | const TodoItem = ({ data, onToggle, onDelete }: IProps) => {
14 | const { theme } = useContext(ThemeContext);
15 | return (
16 |
17 |
18 |
19 |
28 | {data.title}
29 |
30 |
31 |
=> {
11 | const { slug } = await props.params;
12 | const [category] = slug;
13 |
14 | return {
15 | title: `${category.toUpperCase()} News`
16 | }
17 | }
18 |
19 | const NewsListPage = async (props: IProps) => {
20 | const { slug } = await props.params;
21 |
22 | if (!slug?.length) {
23 | return (
24 |
25 |
You reached this page without selecting a country or category!
26 |
27 | );
28 | }
29 |
30 | // eslint-disable-next-line @typescript-eslint/no-unused-vars
31 | const [category, _year] = slug;
32 |
33 | return (
34 |
35 |
{category} News
36 | ;
14 | }
15 |
16 | const INTI_STATE = { state: { totalAbsents: 0, studentsList: [] }, loading: true, dispatch: () => { } };
17 |
18 | export const StateContext = createContext(INTI_STATE);
19 |
20 | const StateProvider = (props: IProps) => {
21 | const [state, dispatch] = useReducer(stateReducer, { studentsList: [], totalAbsents: 0 });
22 | const { storedData, loading } = useLocalStorage(state.studentsList, 'students-list');
23 |
24 | useLayoutEffect(() => {
25 | if (!loading) {
26 | const stdList: IStudent[] = storedData || [];
27 | dispatch({ type: "INIT", payload: stdList });
28 | }
29 | }, [loading, storedData]);
30 |
31 | return (
32 | {props.children}
33 | )
34 | }
35 |
36 | export default StateProvider
--------------------------------------------------------------------------------
/2_Todo App/src/state/reducer.ts:
--------------------------------------------------------------------------------
1 | import { ITodoItem } from "../components/types";
2 |
3 | interface IState {
4 | todos: ITodoItem[];
5 | userName: string;
6 | }
7 |
8 | // interface IAction {
9 | // type: string;
10 | // payload: any;
11 | // }
12 |
13 | type Action = { type: 'INIT_TODOS', payload: ITodoItem[] }
14 | | { type: 'ADD_TODO', payload: ITodoItem }
15 | | { type: 'REMOVE_TODO', payload: number }
16 | | { type: 'TOGGLE_TODO', payload: number }
17 |
18 | const reducer = (state: IState, action: Action): IState => {
19 | switch (action.type) {
20 | case 'INIT_TODOS': {
21 | if (state.todos.length === 0) {
22 | return { ...state, todos: action.payload }
23 | }
24 | return state;
25 | }
26 | case 'ADD_TODO': {
27 | const newTodo = action.payload;
28 | newTodo.id = Date.now();
29 | return { ...state, todos: [...state.todos, newTodo] }
30 | }
31 | case 'REMOVE_TODO':
32 | return { ...state, todos: state.todos.filter(item => item.id !== action.payload) }
33 | case 'TOGGLE_TODO': {
34 | return { ...state, todos: state.todos.map(item => (item.id === action.payload) ? { ...item, isDone: !item.isDone } : item) }
35 | }
36 | default: {
37 | return state;
38 | }
39 | }
40 | }
41 |
42 | export default reducer;
--------------------------------------------------------------------------------
/1_Students App/src/components/student/student.component.tsx:
--------------------------------------------------------------------------------
1 | import './student.css';
2 | import { IStudent } from '../../@types';
3 | import CoursesList from '../courses-list/courses-list.component';
4 | import { Link } from 'react-router-dom';
5 | import Absents from '../absents/absents.component';
6 |
7 | interface IProps extends IStudent {
8 | mode: 'details' | 'list';
9 | }
10 |
11 | const Student = (props: IProps) => {
12 | return (
13 |
14 |
15 | Student:
16 | {
17 | props.mode === 'list'
18 | ?
22 |
23 | Age: {props.age}
24 |
25 |
26 | Is Graduated: {props.isGraduated ? 'Yes' : 'No'}
27 |
28 |
29 | Courses List:
30 |
32 | {
33 | props.mode === 'list' &&
34 | }
35 |
) => {
14 | e.preventDefault();
15 | const title: string = e.currentTarget["task"].value;
16 | const isUrgent: boolean = e.currentTarget["urgent"].checked;
17 | if (title.length > 3) {
18 | const newTask: ITodoItem = {
19 | id: Date.now(),
20 | title,
21 | isUrgent,
22 | isDone: false
23 | }
24 |
25 | props.onSubmit(newTask);
26 | }
27 | }
28 |
29 | return (
30 |
38 | )
39 | });
40 |
41 | export default Form;
--------------------------------------------------------------------------------
/memory-card-game/src/screens/screens.css:
--------------------------------------------------------------------------------
1 | .screen.game-screen {
2 | display: flex;
3 | justify-content: center;
4 | align-items: center;
5 | flex-direction: column;
6 | row-gap: 20px;
7 | margin: 0 auto;
8 | }
9 |
10 | .screen.levels-screen .player {
11 | margin-bottom: 30px;
12 | }
13 |
14 | .screen.levels-screen .player input {
15 | padding: 10px;
16 | font-size: 20px;
17 | border-radius: 10px;
18 | outline: none;
19 | border: 1px solid #aaa;
20 | }
21 |
22 | .screen.levels-screen .levels {
23 | display: flex;
24 | width: 60vmin;
25 | justify-content: space-between;
26 | align-items: center;
27 | column-gap: 30px;
28 | margin: 0 auto;
29 | }
30 |
31 | .screen.levels-screen .levels .level {
32 | padding: 50px;
33 | box-sizing: border-box;
34 | }
35 |
36 | .screen.levels-screen .levels .level:hover {
37 | border: 3px solid gray;
38 | }
39 |
40 | .screen.score-screen .boards>:first-child {
41 | border-right: 2px solid gray;
42 | }
43 |
44 | .screen.score-screen .boards {
45 | display: flex;
46 | flex-direction: row;
47 | justify-content: space-between;
48 | align-items: flex-start;
49 | margin-top: 50px;
50 | }
51 |
52 | .screen.score-screen .boards>div {
53 | padding: 0 30px;
54 | width: 50%;
55 | }
56 |
57 | .screen.score-screen .boards>div h2 {
58 | margin-top: 0;
59 | }
--------------------------------------------------------------------------------
/1_Students App/src/hooks/local-storage.hook.ts:
--------------------------------------------------------------------------------
1 | import { useEffect, useRef, useState } from "react";
2 |
3 | const useLocalStorage = (state: any, storageKey: string) => {
4 | const [storedData, setStoredData] = useState({ data: null, loading: true });
5 | const isInitialMount = useRef(true);
6 |
7 | useEffect(() => {
8 | // Read the data on the first render
9 | const strData = localStorage.getItem(storageKey);
10 | try {
11 | if (strData !== null) {
12 | setStoredData({ data: JSON.parse(strData), loading: false });
13 | } else {
14 | setStoredData({ data: null, loading: false });
15 | }
16 | } catch {
17 | setStoredData({ data: strData || null, loading: false });
18 | }
19 | }, []);
20 |
21 | useEffect(() => {
22 | if (isInitialMount.current) {
23 | isInitialMount.current = false;
24 | return;
25 | }
26 |
27 | if (typeof (state) === 'object') {
28 | localStorage.setItem(storageKey, JSON.stringify(state));
29 | } else if (state === null) {
30 | localStorage.removeItem(storageKey);
31 | } else {
32 | localStorage.setItem(storageKey, state.toString());
33 | }
34 | }, [state, storageKey]);
35 |
36 | return { storedData: storedData.data, loading: storedData.loading };
37 | }
38 |
39 | export default useLocalStorage;
--------------------------------------------------------------------------------
/4_news_app/components/header/header.module.css:
--------------------------------------------------------------------------------
1 | .header {
2 | box-sizing: border-box;
3 | width: 100%;
4 | height: 56px;
5 | background: #FFFFFFFF;
6 | /* white */
7 | border-radius: 0px;
8 | box-shadow: 0px 0px 1px #171a1f4a, 0px 0px 2px #171a1f1F;
9 | display: flex;
10 | align-items: center;
11 | justify-content: space-between;
12 | padding: 0 20px;
13 | }
14 |
15 | .header .logo {
16 | display: flex;
17 | align-items: center;
18 | justify-content: flex-start;
19 | column-gap: 10px;
20 | }
21 |
22 | .header .logo img {
23 | height: 36px;
24 | border-radius: 0px;
25 | }
26 |
27 | .header .logo h1 {
28 | font-family: var(--font-roboto);
29 | font-size: 28px;
30 | line-height: 42px;
31 | font-weight: 700;
32 | color: #000000;
33 | }
34 |
35 | .header nav {
36 | display: flex;
37 | align-items: center;
38 | font-family: var(--font-mulish);
39 | font-size: 14px;
40 | line-height: 22px;
41 | font-weight: 400;
42 | opacity: 1;
43 | }
44 |
45 | .header nav a {
46 | display: flex;
47 | align-items: center;
48 | justify-content: center;
49 | padding: 15px 12px;
50 | color: #565E6CFF;
51 | border-radius: 2px;
52 | cursor: pointer;
53 | white-space: nowrap;
54 | text-decoration: none;
55 | }
56 |
57 | .header nav a.selected {
58 | border-bottom: 4px solid #71B2ABFF;
59 | }
--------------------------------------------------------------------------------
/4_news_app/public/next.svg:
--------------------------------------------------------------------------------
1 |
18 |
Welcome to GSG React/Next Course
19 |
20 |
21 |
28 |
) => {
12 | e.preventDefault();
13 | logout();
14 | }
15 |
16 | return (
17 |
18 |
19 |
27 |
28 | {
29 | user?.userName
30 | ? `Hello ${user.userName}`
31 | :
37 |
38 | )
39 | }
40 |
41 | export default NavBar
--------------------------------------------------------------------------------
/1_Students App/src/state/reducer.ts:
--------------------------------------------------------------------------------
1 | import { IStudent } from "../@types";
2 |
3 | export type State = {
4 | studentsList: IStudent[];
5 | totalAbsents: number;
6 | };
7 |
8 | export type Action =
9 | | { type: "INIT"; payload: IStudent[] }
10 | | { type: "ADD_STUDENT"; payload: IStudent }
11 | | { type: "REMOVE_FIRST" }
12 | | { type: "UPDATE_ABSENTS"; payload: { id: string; change: number } };
13 |
14 | export const stateReducer = (state: State, action: Action): State => {
15 | switch (action.type) {
16 | case "INIT": {
17 | const totalAbsents: number = action.payload.reduce(
18 | (prev, cur) => prev + cur.absents, 0);
19 | return { studentsList: action.payload, totalAbsents };
20 | }
21 | case "ADD_STUDENT":
22 | return {
23 | ...state,
24 | studentsList: [action.payload, ...state.studentsList],
25 | };
26 | case "REMOVE_FIRST":
27 | return {
28 | ...state,
29 | studentsList: state.studentsList.slice(1),
30 | };
31 | case "UPDATE_ABSENTS":
32 | return {
33 | studentsList: state.studentsList.map((student) =>
34 | student.id === action.payload.id
35 | ? { ...student, absents: student.absents + action.payload.change }
36 | : student
37 | ),
38 | totalAbsents: state.totalAbsents + action.payload.change,
39 | };
40 | default:
41 | return state;
42 | }
43 | };
44 |
--------------------------------------------------------------------------------
/1_Students App/src/components/courses-list-form/courses-list-form.component.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useRef, useState } from "react";
2 |
3 | interface IProps {
4 | value: string[];
5 | onSubmit: (list: string[]) => void;
6 | }
7 |
8 | const CoursesListForm = (props: IProps) => {
9 | const [courseList, setCoursesList] = useState(props.value);
10 | const inputRef = useRef(null);
11 |
12 | useEffect(() => {
13 | setCoursesList(props.value);
14 | }, [props.value]);
15 |
16 | const handleSubmit = (event: React.FormEvent) => {
17 | event.preventDefault();
18 | const newCourse = event.currentTarget["courseName"].value;
19 | const newList = [...courseList, newCourse];
20 | setCoursesList(newList);
21 | props.onSubmit(newList);
22 |
23 | if (inputRef.current) {
24 | inputRef.current.value = "";
25 | }
26 | }
27 |
28 | return (
29 |
30 |
37 |
38 | {courseList.map((course, index) => {course} )}
39 |
40 |
([]);
8 |
9 | const fetchNews = () => {
10 | fetch('http://127.0.0.1:3000/api/news?category=palestine')
11 | .then(res => res.json())
12 | .then(res => setNewsList(res.results));
13 | }
14 |
15 | const submitNews = () => {
16 | fetch('http://127.0.0.1:3000/api/news?category=palestine', {
17 | method: 'POST',
18 | body: JSON.stringify({
19 | "message": "hi from FE"
20 | })
21 | })
22 | .then(res => res.json())
23 | .then(res => setNewsList(res.results));
24 | }
25 |
26 | const loadArticle = (slug: string) => {
27 | fetch(`http://127.0.0.1:3000/api/news/${slug}123`)
28 | .then(res => res.json())
29 | .then(res => console.log(res));
30 | }
31 |
32 | return (
33 |
34 |
UI for testing the APIs
35 |
36 |
37 | Fetch News
38 |
39 |
40 | Submit News
41 |
42 |
43 |
44 | {
45 | newsList.map(item => loadArticle(item.slug)}>{item.title} )
46 | }
47 |
48 |
49 |
=> {
12 | const { slug } = await props.params;
13 | const article = getNewsArticle(slug);
14 |
15 | return {
16 | title: `${article.title}`,
17 | authors: { name: article.author }
18 | }
19 | }
20 |
21 | const NewArticle = async (props: IProps) => {
22 | const slug = (await props.params).slug;
23 | const article = getNewsArticle(slug);
24 |
25 | return (
26 |
27 | {article.title}
28 |
29 | Author: {article.author} | {new Date(article.date).toLocaleDateString()}
30 |
31 |
40 | {article.content}
41 |
42 |
43 |
44 | )
45 | }
46 |
47 | export default NewArticle
--------------------------------------------------------------------------------
/1_Students App/src/screens/StudentDetails.screen.tsx:
--------------------------------------------------------------------------------
1 | import { useNavigate, useParams } from 'react-router-dom';
2 | import Student from '../components/student/student.component'
3 | import { IStudent } from '../@types';
4 | import { useEffect, useState } from 'react';
5 |
6 | const StudentDetails = () => {
7 | const { id } = useParams();
8 | const navigate = useNavigate();
9 | const [currentStudent, setCurrentStudent] = useState();
10 |
11 | useEffect(() => {
12 | // find the student with ID id from the local storage database
13 | const studentsListStr = localStorage.getItem("students-list");
14 | if (studentsListStr) {
15 | const stdList: IStudent[] = JSON.parse(studentsListStr);
16 | const std = stdList.find(item => item.id === id);
17 | if (std) {
18 | setCurrentStudent(std);
19 | } else {
20 | navigate('/404');
21 | }
22 | }
23 | }, [id]);
24 |
25 | return (
26 |
27 |
Student Details: {currentStudent?.name}
28 | {
29 | currentStudent && (
30 | ) => {
11 | e.preventDefault();
12 | const userName = e.currentTarget['userName'].value;
13 | const role = (e.currentTarget['role'] as any).value;
14 |
15 | if (userName) {
16 | login({ userName, role });
17 | navigate('/');
18 | }
19 | }
20 |
21 | return (
22 |
23 |
Please enter your login data
24 |
41 |
) => {
21 | const name = event.currentTarget.value || '';
22 | setGameMode(old => ({ ...old, playerName: name }));
23 | }
24 |
25 | return (
26 |
27 |
Flip Card Game
28 |
29 |
30 |
31 |
Please enter your name
32 |
33 | {Boolean(error) &&
{error}
}
34 |
35 |
Please select your level
36 |
37 | handleSelectLevel(ELevels.EASY)}>Easy
38 | handleSelectLevel(ELevels.MEDIUM)}>Medium
39 | handleSelectLevel(ELevels.HARD)}>Hard
40 |
41 |
([]);
24 | const [topPlayers, setTopPlayers] = useState([]);
25 |
26 | useEffect(() => {
27 | const ss = getScores();
28 | setSavedScores(ss);
29 | const tp = getTopPlayers(ss);
30 | setTopPlayers(tp);
31 | }, []);
32 |
33 | const handleClearAll = () => {
34 | if (confirm('Sure?')) {
35 | localStorage.removeItem('flip-cards-scores');
36 | }
37 | }
38 |
39 | return (
40 |
41 |
Score Board
42 |
43 |
44 |
Clear all Scores
45 | {
46 | !savedScores.length
47 | ?
No Scores Found!
48 | : (
49 |
50 |
51 |
All Games
52 |
54 |
55 |
Top 3 Games
56 |
58 |
59 | )
60 | }
61 |
62 |
6 |
7 |
8 |
John Doe
9 |
Frontend Developer
10 |
11 |
12 |
13 |
14 | Passionate about building beautiful and functional user interfaces. Loves Tailwind CSS and modern web technologies.
15 |
16 |
17 |
Skills
18 |
19 | JavaScript
20 | React
21 | Tailwind CSS
22 | Node.js
23 |
24 |
25 |
26 |
27 | Contact Me
28 |
29 |
30 |
31 |
34 |
35 |
(props.absents);
12 | const { user } = useContext(AuthContext);
13 | const { dispatch } = useContext(StateContext);
14 |
15 |
16 | useEffect(() => {
17 | if (absents >= 10) {
18 | setAbsentColor('#ff0000');
19 | } else if (absents >= 7) {
20 | setAbsentColor('#fd9c0e');
21 | } else if (absents >= 5) {
22 | setAbsentColor('#d6c728');
23 | } else {
24 | setAbsentColor('#213547');
25 | }
26 | }, [absents]);
27 |
28 | const addAbsent = () => {
29 | prevAbsents.current = absents;
30 | setAbsents(absents + 1);
31 | if (dispatch) {
32 | dispatch({ type: "UPDATE_ABSENTS", payload: { id: props.id, change: +1 } });
33 | }
34 | }
35 |
36 | const removeAbsent = () => {
37 | if (absents - 1 >= 0) {
38 | prevAbsents.current = absents;
39 | setAbsents(absents - 1);
40 | if (dispatch) {
41 | dispatch({ type: "UPDATE_ABSENTS", payload: { id: props.id, change: -1 } });
42 | }
43 | }
44 | }
45 |
46 | const resetAbsent = () => {
47 | prevAbsents.current = absents;
48 | setAbsents(0);
49 | if (dispatch) {
50 | dispatch({ type: "UPDATE_ABSENTS", payload: { id: props.id, change: -absents } });
51 | }
52 | }
53 |
54 | return (
55 |
56 | Absents: {absents}
57 | +
58 | -
59 | Reset
60 |
61 | )
62 | }
63 |
64 | export default Absents;
--------------------------------------------------------------------------------
/testing-ui/README.md:
--------------------------------------------------------------------------------
1 | # React + TypeScript + Vite
2 |
3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4 |
5 | Currently, two official plugins are available:
6 |
7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9 |
10 | ## Expanding the ESLint configuration
11 |
12 | If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
13 |
14 | ```js
15 | export default tseslint.config({
16 | extends: [
17 | // Remove ...tseslint.configs.recommended and replace with this
18 | ...tseslint.configs.recommendedTypeChecked,
19 | // Alternatively, use this for stricter rules
20 | ...tseslint.configs.strictTypeChecked,
21 | // Optionally, add this for stylistic rules
22 | ...tseslint.configs.stylisticTypeChecked,
23 | ],
24 | languageOptions: {
25 | // other options...
26 | parserOptions: {
27 | project: ['./tsconfig.node.json', './tsconfig.app.json'],
28 | tsconfigRootDir: import.meta.dirname,
29 | },
30 | },
31 | })
32 | ```
33 |
34 | You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
35 |
36 | ```js
37 | // eslint.config.js
38 | import reactX from 'eslint-plugin-react-x'
39 | import reactDom from 'eslint-plugin-react-dom'
40 |
41 | export default tseslint.config({
42 | plugins: {
43 | // Add the react-x and react-dom plugins
44 | 'react-x': reactX,
45 | 'react-dom': reactDom,
46 | },
47 | rules: {
48 | // other rules...
49 | // Enable its recommended typescript rules
50 | ...reactX.configs['recommended-typescript'].rules,
51 | ...reactDom.configs.recommended.rules,
52 | },
53 | })
54 | ```
55 |
--------------------------------------------------------------------------------
/memory-card-game/src/providers/reducer.ts:
--------------------------------------------------------------------------------
1 | import { ELevels, ICard } from "../types/@types";
2 | import { createGameBoard } from "../utils/game.util";
3 |
4 | export interface IGameState {
5 | initialized: boolean;
6 | cards: ICard[];
7 | openCards: number[];
8 | }
9 |
10 | export type Action =
11 | { type: 'init', payload: { level: ELevels } }
12 | | { type: 'flip-card', payload: { id: number, index: number } }
13 | | { type: 'hide-mismatch' };
14 |
15 | export const gameReducer = (state: IGameState, action: Action): IGameState => {
16 | switch (action.type) {
17 | case 'init': {
18 | const cards = createGameBoard(action.payload.level);
19 | return { ...state, initialized: true, cards };
20 | }
21 |
22 | case 'flip-card': {
23 | if (state.openCards.includes(action.payload.index) ||
24 | state.openCards.length === 2 ||
25 | state.cards[action.payload.index].revealed
26 | || state.cards[action.payload.index].visible) {
27 | return state;
28 | }
29 |
30 | let openCards = [...state.openCards, action.payload.index];
31 | const cards: ICard[] = [...state.cards];
32 | if (openCards.length === 2) {
33 | cards[openCards[0]].visible = true;
34 | cards[openCards[1]].visible = true;
35 | if (cards[openCards[0]].id === cards[openCards[1]].id) {
36 | cards[openCards[0]].revealed = true;
37 | cards[openCards[1]].revealed = true;
38 | openCards = [];
39 | }
40 | } else {
41 | if (!cards[action.payload.index].visible) {
42 | cards[action.payload.index].visible = true;
43 | }
44 | }
45 | return { ...state, openCards, cards };
46 | }
47 | case 'hide-mismatch': {
48 | if (state.cards[state.openCards[0]].id !== state.cards[state.openCards[1]].id) {
49 | const cards: ICard[] = [...state.cards];
50 | cards[state.openCards[0]].visible = false;
51 | cards[state.openCards[1]].visible = false;
52 | return { ...state, openCards: [], cards };
53 | } else {
54 | return state;
55 | }
56 | }
57 | default:
58 | return state
59 | }
60 | }
--------------------------------------------------------------------------------
/4_news_app/services/news.service.ts:
--------------------------------------------------------------------------------
1 | import sql from 'better-sqlite3';
2 | const db = sql('news.db');
3 |
4 | const getNewsByCategory = (category: string): News.Item_[] => {
5 | const results = db.prepare('SELECT * FROM articles WHERE category = ?').all(category);
6 | return results as News.Item_[];
7 | }
8 |
9 | const getNewsArticle = (slug: string): News.Item_ => {
10 | return db.prepare('SELECT * FROM articles WHERE slug = ?').get(slug) as News.Item_;
11 | }
12 |
13 | const insertArticle = (newArticle: News.Item_) => {
14 | db.prepare(`
15 | INSERT INTO articles
16 | (slug, title, image, summary, content, author, author_email, date, category)
17 | VALUES (
18 | @slug,
19 | @title,
20 | @image,
21 | @summary,
22 | @content,
23 | @author,
24 | @author_email,
25 | @date,
26 | @category
27 | )`)
28 | .run(newArticle);
29 | }
30 |
31 | const api_key = 'pub_701076cdd4cdeaa56df41b17fae04f1ce8350';
32 |
33 | /**
34 | * @deprecated we will use our db to fetch data
35 | */
36 | const fetchNews = async (category: string, country: string) => {
37 | const res = await fetch(
38 | `https://newsdata.io/api/1/latest?apikey=${api_key}&category=${category}&country=${country}`,
39 | { method: 'GET', cache: 'no-store' }
40 | );
41 |
42 | const newsRes = (await res.json()) as News.IResponse;
43 | let latestNews: News.Item[] = [];
44 | if (newsRes.status === 'success') {
45 | latestNews = newsRes.results.map(item => (
46 | {
47 | id: item.article_id,
48 | title: item.title,
49 | img: item.image_url,
50 | content: item.description
51 | }
52 | ));
53 | } else {
54 | // triggering notFound manually
55 | // notFound();
56 | }
57 |
58 | // throw new Error("Something went wrong while fetching the News from server [xa2658]");
59 |
60 | // The goal of the promise below is to make the response slower (just to demo loading status)
61 | return new Promise((resolve) => setTimeout(() => {
62 | resolve(latestNews);
63 | }, 1000));
64 | }
65 |
66 | export {
67 | fetchNews,
68 | getNewsByCategory,
69 | getNewsArticle,
70 | insertArticle
71 | }
--------------------------------------------------------------------------------
/4_news_app/middleware.ts:
--------------------------------------------------------------------------------
1 | import { NextRequest, NextResponse } from "next/server";
2 | import { verifyToken } from "./utils/auth";
3 | import { cookies } from "next/headers";
4 |
5 | const authenticateUser = async (token: string | undefined, request: NextRequest) => {
6 |
7 | // verify there is a token
8 | if (!token) {
9 | // else redirect to login page!
10 | return NextResponse.redirect(new URL(`/user/login?msg=${encodeURIComponent('You must be logged in to access this!')}`, request.url));
11 | }
12 |
13 | // verify the token is valid
14 | const user = await verifyToken(token);
15 |
16 | if (!user) {
17 | // else redirect to login page!
18 | (await cookies()).delete('auth-token');
19 | return NextResponse.redirect(new URL(`/user/login?msg=${encodeURIComponent('Your session is expired!')}`, request.url));
20 | }
21 | return user;
22 | }
23 |
24 | export const middleware = async (request: NextRequest) => {
25 | // using the middle for logging
26 | console.log(`A request is made to ${request.nextUrl.pathname}`);
27 | // read cookies from the request
28 | const token = request.cookies.get('auth-token')?.value;
29 |
30 | switch (request.nextUrl.pathname) {
31 | case '/admin':
32 | const res = await authenticateUser(token, request);
33 | if (res instanceof (NextResponse)) {
34 | return res;
35 | }
36 |
37 | // check the role stored the in token
38 | if (res.role !== 'admin') {
39 | // else redirect to home page!
40 | return NextResponse.redirect(new URL('/', request.url));
41 | }
42 | // if role is admin => move to next page (admin page)
43 | break;
44 | case '/add-news': {
45 | const res = await authenticateUser(token, request) as News.IUser;
46 | if (res instanceof (NextResponse)) {
47 | return res;
48 | }
49 |
50 | if (!['editor', 'admin'].includes(res.role)) {
51 | return NextResponse.redirect(new URL('/', request.url));
52 | }
53 | break;
54 | }
55 |
56 | default:
57 | break;
58 | }
59 |
60 |
61 | return NextResponse.next();
62 | }
63 |
64 | export const config = {
65 | matcher: ['/news/:path*', '/admin/:path*', '/:path*']
66 | }
--------------------------------------------------------------------------------
/4_news_app/controllers/news-actions.ts:
--------------------------------------------------------------------------------
1 | 'use server';
2 |
3 | import { ALLOWED_CATEGORIES } from "@/constants/data";
4 | import { insertArticle } from "@/services/news.service";
5 | import { redirect } from "next/navigation";
6 | import slugify from "slugify";
7 | import xss from "xss";
8 | import fs from 'node:fs';
9 |
10 | const addArticle = async (prevState: { errors: string[] }, formData: FormData) => {
11 | const title = xss(formData.get('title')?.toString() || '');
12 |
13 | const newArticle: News.Item_ = {
14 | title,
15 | image: '',
16 | summary: xss(formData.get('summary')?.toString() || ''),
17 | content: xss(formData.get('content')?.toString() || ''),
18 | date: new Date(formData.get('date')?.toString() || '').getTime(),
19 | author: formData.get('author')?.toString() || '',
20 | author_email: formData.get('author_email')?.toString() || '',
21 | category: formData.get('category')?.toString() || 'global',
22 | slug: slugify(title, { lower: true })
23 | };
24 |
25 | const imgFile = formData.get('image') as File;
26 | const fileExtension = imgFile.name.split('.').pop();
27 | const fileName = `${newArticle.slug}.${fileExtension}`;
28 | const stream = fs.createWriteStream(`public/images/${fileName}`);
29 | const bufferedImage = await imgFile.arrayBuffer()
30 | stream.write(Buffer.from(bufferedImage), (error) => {
31 | if (error) {
32 | throw new Error('Error uploading Image!');
33 | }
34 | });
35 |
36 | newArticle.image = `/images/${fileName}`;
37 |
38 | const errors: string[] = [];
39 |
40 | if (!newArticle.title.length) {
41 | errors.push("The title should not be empty");
42 | }
43 |
44 | if (newArticle.title.length > 300) {
45 | errors.push("The title should be less than 300 chars length");
46 | }
47 |
48 | if (!ALLOWED_CATEGORIES.includes(newArticle.category)) {
49 | errors.push("The category you've provided is not allowed!");
50 | }
51 |
52 | if (newArticle.date > Date.now()) {
53 | errors.push("The date should not be in the future!");
54 | }
55 |
56 | if (errors.length) {
57 | return {
58 | errors
59 | }
60 | }
61 |
62 | await new Promise((resolve) => setTimeout(resolve, 2000));
63 | insertArticle(newArticle);
64 | redirect(`/news/${newArticle.slug}`);
65 | }
66 |
67 | export {
68 | addArticle
69 | };
--------------------------------------------------------------------------------
/memory-card-game/src/hooks/game-logic.hook.ts:
--------------------------------------------------------------------------------
1 | import { useReducer, useContext, useRef, useEffect } from "react";
2 | import { useNavigate } from "react-router-dom";
3 | import { GameModeContext } from "../providers/modeProvider";
4 | import { gameReducer } from "../providers/reducer";
5 | import { checkedFinished } from "../utils/game.util";
6 | import { IScore } from "../types/@types";
7 |
8 | const storeScore = (score: IScore) => {
9 | const scores: IScore[] = JSON.parse(localStorage.getItem('flip-cards-scores') || '[]');
10 | scores.push(score);
11 | localStorage.setItem('flip-cards-scores', JSON.stringify(scores));
12 | }
13 |
14 | const useGameLogic = () => {
15 | const [state, dispatch] = useReducer(gameReducer, { cards: [], initialized: false, openCards: [] });
16 | const { gameMode, setGameMode, resetGame } = useContext(GameModeContext);
17 | const timerRef = useRef(0);
18 | const navigate = useNavigate();
19 |
20 | useEffect(() => {
21 | if (!gameMode.playerName) {
22 | navigate('/');
23 | return;
24 | }
25 |
26 | if (!state.initialized) {
27 | dispatch({ type: 'init', payload: { level: gameMode.level } });
28 | resetGame();
29 | timerRef.current = setInterval(() => {
30 | setGameMode(old => ({ ...old, time: old.time + 1 }));
31 | }, 1000);
32 | }
33 |
34 | return () => {
35 | clearInterval(timerRef.current);
36 | }
37 | }, []);
38 |
39 | useEffect(() => {
40 | if (!state.initialized) return;
41 |
42 | if (state.openCards.length === 2) {
43 | setGameMode(old => ({ ...old, wrongMoves: old.wrongMoves + 1 }));
44 | setTimeout(() => {
45 | dispatch({ type: 'hide-mismatch' });
46 | }, 1500);
47 | }
48 |
49 | const isFinished = checkedFinished(state.cards);
50 | if (isFinished) {
51 | setGameMode(old => ({ ...old, finished: true }));
52 | clearInterval(timerRef.current);
53 |
54 | const score: IScore = {
55 | finishTime: gameMode.time,
56 | level: gameMode.level,
57 | playerName: gameMode.playerName,
58 | wrongMoves: gameMode.wrongMoves
59 | }
60 | storeScore(score);
61 |
62 | setTimeout(() => {
63 | navigate('/score-board');
64 | }, 3000);
65 | }
66 | }, [state.openCards]);
67 |
68 | return {
69 | state,
70 | gameMode,
71 | dispatch
72 | }
73 |
74 | }
75 |
76 | export default useGameLogic;
--------------------------------------------------------------------------------
/4_news_app/components/add-article/add-article.module.css:
--------------------------------------------------------------------------------
1 | .newsForm {
2 | display: flex;
3 | flex-direction: column;
4 | gap: 1.5rem;
5 | }
6 |
7 | .formGroup {
8 | display: flex;
9 | flex-direction: column;
10 | gap: 0.5rem;
11 | }
12 |
13 | .formLabel {
14 | font-weight: 500;
15 | color: #333333;
16 | font-size: 0.95rem;
17 | }
18 |
19 | .formInput,
20 | .formTextarea,
21 | .formSelect {
22 | padding: 0.75rem;
23 | border: 1px solid #dddddd;
24 | border-radius: 4px;
25 | font-size: 1rem;
26 | transition: all 0.3s ease;
27 | }
28 |
29 | .formInput:focus,
30 | .formTextarea:focus,
31 | .formSelect:focus {
32 | outline: none;
33 | border-color: #71b2ab;
34 | box-shadow: 0 0 0 2px rgba(113, 178, 171, 0.2);
35 | }
36 |
37 | .formTextarea {
38 | resize: vertical;
39 | min-height: 120px;
40 | }
41 |
42 | .formSelect {
43 | background-color: white;
44 | cursor: pointer;
45 | }
46 |
47 | .formSelect option {
48 | padding: 0.5rem;
49 | }
50 |
51 | .formHidden {
52 | display: none;
53 | }
54 |
55 | .submitButton {
56 | background-color: #71b2ab;
57 | color: white;
58 | border: none;
59 | padding: 0.75rem 1.5rem;
60 | font-size: 1rem;
61 | font-weight: 500;
62 | border-radius: 4px;
63 | cursor: pointer;
64 | transition: background-color 0.3s ease;
65 | align-self: flex-start;
66 | margin-top: 0.5rem;
67 | }
68 |
69 | .submitButton:hover {
70 | background-color: #5a8f89;
71 | }
72 |
73 | .submitButton:disabled {
74 | background-color: #9b9c9c;
75 | cursor: not-allowed;
76 | }
77 |
78 | .submitButton:focus {
79 | outline: none;
80 | box-shadow: 0 0 0 3px rgba(113, 178, 171, 0.3);
81 | }
82 |
83 | /* Responsive adjustments */
84 | @media (max-width: 768px) {
85 | .newsFormContainer {
86 | padding: 1.5rem;
87 | margin: 1rem;
88 | }
89 |
90 | .formTitle {
91 | font-size: 1.75rem;
92 | }
93 | }
94 |
95 | /* Optional: Add some animation for form elements */
96 | .formInput,
97 | .formTextarea,
98 | .formSelect {
99 | transform: translateY(0);
100 | transition: transform 0.2s ease, border-color 0.3s ease, box-shadow 0.3s ease;
101 | }
102 |
103 | .formInput:focus,
104 | .formTextarea:focus,
105 | .formSelect:focus {
106 | transform: translateY(-2px);
107 | }
108 |
109 |
110 | .errors {
111 | font-size: 14px;
112 | color: firebrick;
113 | list-style-type: disc;
114 | padding-left: 20px;
115 | }
--------------------------------------------------------------------------------
/3_next-example/app/antd/page.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 | import React from 'react'
3 | import { Button, Form, Checkbox, Input } from 'antd';
4 | import { SyncOutlined } from '@ant-design/icons';
5 | import { DatePicker } from 'antd';
6 | import type { FormProps } from 'antd';
7 |
8 | const { RangePicker } = DatePicker;
9 |
10 | const Page = () => {
11 | type FieldType = {
12 | username?: string;
13 | password?: string;
14 | remember?: string;
15 | };
16 |
17 | const onFinish: FormProps['onFinish'] = (values) => {
18 | console.log('Success:', values);
19 | };
20 |
21 | const onFinishFailed: FormProps['onFinishFailed'] = (errorInfo) => {
22 | console.log('Failed:', errorInfo);
23 | };
24 |
25 | return (
26 |
27 |
28 | Primary Button
29 | {
34 |
35 | console.log(v?.[0]?.toDate());
36 | console.log(v?.[1]?.toDate());
37 | }}
38 | />
39 |
40 |
41 |
77 |
78 |
();
14 | const [state, dispatch] = useReducer(reducer, { todos: [], userName: 'Ahmad' });
15 | const { theme, setTheme } = useContext(ThemeContext);
16 |
17 | const { storedData } = useLocalStorage(state.todos, 'todo-list');
18 |
19 | useEffect(() => {
20 | document.body.style.backgroundColor = theme === 'light' ? '#fff' : '#000';
21 | }, [theme]);
22 |
23 | useEffect(() => {
24 | dispatch({ type: 'INIT_TODOS', payload: storedData || [] });
25 | }, [storedData]);
26 |
27 | useEffect(() => {
28 | timerRef.current = setInterval(() => {
29 | setDate(new Date().toLocaleTimeString());
30 | }, 1000);
31 | }, []);
32 |
33 | const stopTime = () => {
34 | if (timerRef.current) {
35 | clearInterval(timerRef.current);
36 | }
37 | }
38 |
39 | const handleNewItem = useCallback((item: ITodoItem) => {
40 | dispatch({ type: 'ADD_TODO', payload: item });
41 | }, [state.todos]);
42 |
43 | const handleTaskToggle = (e: React.ChangeEvent) => {
44 | const itemId = Number(e.target.dataset["itemId"]);
45 | dispatch({ type: 'TOGGLE_TODO', payload: itemId });
46 | }
47 |
48 | const handleDelete = (index: number) => {
49 | // This will delete the item at index!
50 | const itemId = state.todos[index].id;
51 | dispatch({ type: 'REMOVE_TODO', payload: itemId });
52 | }
53 |
54 | const toggleTheme = () => {
55 | setTheme(old => (old === 'light' ? 'dark' : 'light'));
56 | }
57 |
58 | return (
59 |
60 |
61 | Todo App - Hello {state.userName} - {date}
62 | Stop
63 | Toggle Theme
64 |
65 |
66 | (INITIAL_STUDENT);
17 | const [isOpen, setIsOpen] = useState(true);
18 | const [errorsList, setErrorsList] = useState([]);
19 | const [message, setMessage] = useState('');
20 | const nav = useNavigate();
21 |
22 | useEffect(() => {
23 | console.log("Hello from Add Form component!");
24 | }, []);
25 |
26 | const handleChange = (field: string, value: any) => {
27 | setStudent({ ...student, [field]: value });
28 | }
29 |
30 | const handleSubmit = () => {
31 | const newStudent: IStudent = { ...student, id: Date.now().toString() };
32 |
33 | const errors = validateStudent(newStudent);
34 | if (errors.length > 0) {
35 | setErrorsList(errors);
36 | } else {
37 | setErrorsList([]);
38 | props.onSubmit(newStudent);
39 | handleClear();
40 | setMessage('Student Added Successfully');
41 | setTimeout(() => {
42 | nav('/');
43 | }, 1500);
44 | }
45 | }
46 |
47 | const handleClear = () => {
48 | setStudent(INITIAL_STUDENT);
49 | }
50 |
51 | const handleCoursesChange = (list: string[]) => {
52 | setStudent({ ...student, coursesList: list });
53 | }
54 |
55 | return (
56 |
57 |
setIsOpen(!isOpen)}>
58 | {isOpen ? ∧ Close : ∨ Open }
59 | Add Form
60 |
61 |
62 | Student Name:
63 |
70 |
71 | Student Age:
72 |
81 |
82 | Is Graduated:
83 |
90 |
91 |
92 |
96 | Submit
97 |
98 | Clear
99 |
100 | {
101 | Boolean(errorsList.length) && (
102 |
103 |
You have the following error/s:
104 | {
105 | errorsList.map(error =>
- {error}
)
106 | }
107 |
108 | )
109 | }
110 | {Boolean(message) &&
{message} }
111 |
11 |