Start working on resources

README.md

@@ -1,34 +1,13 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+# Education technologies, news, books, courses, videos, articles, podcasts, and more
+
 
-## Getting Started
+## Run locally
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 
 First, run the development server:
 
 ```bash
 npm run dev
-# or
-yarn dev
 ```
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `pages/page.tsx`. The page auto-updates as you edit the file.
-
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
-
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

_templates/_page.tsx

@@ -0,0 +1,9 @@
+import type { NextPage } from 'next'
+
+const SomePage: NextPage = () => {
+  return (
+    <div>SomePage</div>
+  )
+}
+
+export default SomePage

src/app/books/page.tsx

@@ -0,0 +1,9 @@
+import type { NextPage } from 'next'
+
+const BooksPage: NextPage = () => {
+  return (
+    <div>BooksPage</div>
+  )
+}
+
+export default BooksPage

src/app/companies/page.tsx

@@ -0,0 +1,35 @@
+import type { NextPage } from 'next'
+
+import { CompaniesList } from '@/components'
+
+const companies = [
+  {
+    id: '1',
+    name: 'Khan Academy',
+    url: 'https://www.khanacademy.org/',
+    wiki: 'https://en.wikipedia.org/wiki/Khan_Academy',
+    launched: '2006',
+    logo: 'https://upload.wikimedia.org/wikipedia/commons/thumb/f/f6/Khan_Academy_logo_%282018%29.svg/440px-Khan_Academy_logo_%282018%29.svg.png',
+    description: 'Khan Academy is a nonprofit with the mission of providing a free, world-class education for anyone, anywhere.'
+  },
+  {
+    id: '2',
+    name: 'Coursera',
+    url: 'https://www.coursera.org/',
+    wiki: 'https://en.wikipedia.org/wiki/Coursera',
+    launched: '2012',
+    logo: 'https://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/Coursera_logo_%282020%29.svg/440px-Coursera_logo_%282020%29.svg.png',
+    description: 'Choose from hundreds of free courses or pay to earn a Course or Specialization Certificate. Explore our catalog of online degrees, certificates, Specializations, & MOOCs in data science, computer science, business, health, and dozens of other topics.'
+  }
+];
+
+const CompaniesPage: NextPage = () => {
+  return (
+    <div>
+      <h1>Companies</h1>
+      <CompaniesList list={companies} />
+    </div>
+  )
+}
+
+export default CompaniesPage

src/app/free-universities/page.tsx

@@ -0,0 +1,9 @@
+import type { NextPage } from 'next'
+
+const FreeUniversitiesPage: NextPage = () => {
+  return (
+    <div>FreeUniversitiesPage</div>
+  )
+}
+
+export default FreeUniversitiesPage

src/app/layout.tsx

@@ -1,6 +1,9 @@
 import type { ReactNode } from 'react'
-import { Metadata } from 'next'
+import type { Metadata } from 'next'
 import Script from 'next/script'
+
+import { GlobalMenu } from '@/components'
+
 import '@/styles/global.css'
 
 export const metadata: Metadata = {
@@ -16,6 +19,9 @@ export default function RootLayout ({
   return (
     <html lang="en">
     <body>
+    <header>
+      <GlobalMenu />
+    </header>
     <main>
       {children}
     </main>

src/app/news/page.tsx

@@ -0,0 +1,9 @@
+import type { NextPage } from 'next'
+
+const NewsPage: NextPage = () => {
+  return (
+    <div>NewsPage</div>
+  )
+}
+
+export default NewsPage

src/app/page.tsx

@@ -1,4 +1,4 @@
-import { NextPage } from 'next'
+import type { NextPage } from 'next'
 import Link from 'next/link'
 
 const IndexPage: NextPage = () => {

src/app/systems/page.tsx

@@ -0,0 +1,27 @@
+import type { NextPage } from 'next'
+
+import { SystemsList } from '@/components'
+
+const systems = [
+  {
+    name: 'Flipped classroom',
+    description: 'Flipped classroom is an instructional strategy and a type of blended learning that reverses the traditional learning environment by delivering instructional content, often online, outside of the classroom. It moves activities, including those that may have traditionally been considered homework, into the classroom. In a flipped classroom, students watch online lectures, collaborate in online discussions, or carry out research at home and engage in concepts in the classroom with the guidance of a mentor.',
+    wiki: 'https://en.wikipedia.org/wiki/Flipped_classroom',
+  },
+  {
+    name: 'Personalized learning',
+    description: 'Personalized learning, individualized instruction, personal learning environment and direct instruction all refer to efforts to tailor education to meet the different needs of students. In addition, various terms are used to describe what personalized learning looks like, including differentiated instruction, individualized instruction and adaptive learning.',
+    wiki: 'https://en.wikipedia.org/wiki/Personalized_learning',
+  },
+]
+
+const SystemsPage: NextPage = () => {
+  return (
+    <div>
+      <h3>SystemsPage</h3>
+      <SystemsList systems={systems} />
+    </div>
+  )
+}
+
+export default SystemsPage

src/components/CompaniesList/CompaniesList.tsx

@@ -0,0 +1,30 @@
+'use client'
+
+type Company = {
+  id: string
+  name: string
+  url: string
+  logo: string
+  description: string
+}
+
+export type CompaniesListProps = {
+  list: Company[]
+}
+
+export const CompaniesList = ({ list }: CompaniesListProps) => {
+  return (
+    <div>
+      <h3>CompaniesList</h3>
+      {list.length > 0 && <ul>
+        {list.map((company) => <li key={company.id}>
+          <a href={company.url} target="_blank" rel="noreferrer">
+            <img src={company.logo} alt={company.name} />
+            {company.name}
+          </a>
+          <p>{company.description}</p>
+        </li>)}
+      </ul>}
+    </div>
+  )
+}

src/components/CompaniesList/index.ts

@@ -0,0 +1,2 @@
+export { CompaniesList } from './CompaniesList'
+export type { CompaniesListProps } from './CompaniesList'

src/components/GlobalMenu/GlobalMenu.module.css

@@ -0,0 +1,3 @@
+.component {
+    display: flex;
+}

src/components/GlobalMenu/GlobalMenu.tsx

@@ -0,0 +1,15 @@
+import Link from 'next/link'
+
+import classes from './GlobalMenu.module.css'
+
+export const GlobalMenu = () => {
+  return (
+    <menu className={classes.component}>
+      <li><Link href="/news">edu news</Link></li>
+      <li><Link href="/free-universities">free universities programs</Link></li>
+      <li><Link href="/companies">EduTech companies</Link></li>
+      <li><Link href="/systems">systems</Link></li>
+      <li><Link href="/books">books</Link></li>
+    </menu>
+  )
+}

src/components/GlobalMenu/index.ts

@@ -0,0 +1 @@
+export { GlobalMenu } from './GlobalMenu'

src/components/SystemsList/SystemsList.module.css

@@ -0,0 +1,3 @@
+.component {
+    display: flex;
+}

src/components/SystemsList/SystemsList.tsx

@@ -0,0 +1,23 @@
+import classes from './SystemsList.module.css'
+
+export type SystemsList = {
+  systems: {
+    name: string
+    description: string
+    wiki: string
+  }[]
+}
+
+const SystemsList = ({ systems }: SystemsList) => {
+  console.log("systems: ", systems); // eslint-disable-line
+
+  return (
+    <div className={classes.component}>
+      SystemsList
+    </div>
+  )
+}
+
+export {
+  SystemsList,
+}

src/components/SystemsList/index.ts

@@ -0,0 +1 @@
+export { SystemsList } from './SystemsList'

src/components/index.ts

@@ -0,0 +1,6 @@
+export { GlobalMenu } from './GlobalMenu'
+
+export { CompaniesList } from './CompaniesList'
+export type { CompaniesListProps } from './CompaniesList'
+
+export { SystemsList } from './SystemsList'