alirezarastineh/CODAC-ts-frontend-students

Code Academy Berlin Community App. Developed and maintained by students.

Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Folder Structure
4. CAB Server
5. Roadmap
6. Contributing
7. License
8. Contact
9. Acknowledgments

About The Project

CODAC stands for Code Academy Berlin Community.

This platform is the heart of resources necessary to carry out the courses in Data Science or Web Development offered by the start up training center

It is intended to be improved and maintained by students of the Academy. Particularly during the last project of the web development course and introduces students to a set of advanced new concepts and technologies such as Server Side Rendering.

(back to top)

Built With

React.js is a free and open-source front-end JavaScript library for building user interfaces based on UI components.

Next.js is an open-source web development framework enabling React-based web applications with server-side rendering and generating static websites.

TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.

GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data.

Getting Started

This is an example of how you may give instructions on setting up your project locally. To get a local copy up and running follow these simple example steps.

Prerequisites

• Node
• Yarn package manager

  npm i yarn -g

Installation

1. Clone the repo

   git clone https://github.com/codeacademyberlin/codac-ts-frontend-students.git

2. Install NPM packages

   yarn

3. make a copy and rename .env.local.example to .env.local

4. Run the Next.js app in dev mode

   yarn dev
   # or
   npm run dev

Open http://localhost:3000 with your browser to see the result.

Troubleshoot

(back to top)

Folder Structure

Main Structure

├── __test__ # integration tests with Jest
├── .github # CI/CD scripts for github actions
├── .husky # husky scripts for linting (commit msg and files)
├── .storybook # Configuration files for Storybook
├── cabServer # Queries & Mutations for Code Academy Berlin's GraphQl Server and generated types
├── cypress # e2e (and/or integration) tests and fixtures for Cypress
├── lmsDevSample # Sample data for the LMS pages
├── projects # data for the porjects pages
├── pagesDemo # THESE PAGES ARE CURRENTLY ONLY FOR DEMO(To be deleted)
├── public # Static assets (Images, Fonts)**
├── src # Next App (see below)
├── env.local # Private variables of the app (DO NOT PUSH TO GITHUB!)
├── env.local.example # Describe the variables names of .env.local file) (VARIABLES VALUE SHOULD BE DUMMY!)
├── package.json
└── .gitignore # list of files to be not tracked by source control
└── .gitmodules # refers to the git submodule for the LMS data
└── codegen.yml # setting for code generation of the types of CAB Servers
└── ... # more configurations files

Next App in src directory

├── components # Home grown components organized in subfolder for every pages
|   ├── page subfolder...
├── componentsDemo # DEMO components for pages (to be moved to components folder if used)
├── context # React context providers
│   ├── authContext # User Authentication
│   ├── settingsContext # User Preferences (look & feel)
├── layouts # Home grown layouts components
├── lib # Utilities
├── navigation # Routing links
├── pages # See below
├── pagesDemo # THESE PAGES ARE CURRENTLY ONLY FOR DEMO(To be deleted)
├── public #Static assets (Images, Fonts)**
├── styles # global styles
├── theme # MUI theme definition
├── types # global types

Pages Structure

Rendering method:

• λ (Server) server-side renders at runtime (uses getInitialProps or getServerSideProps)
• ○ (Static) automatically rendered as static HTML (uses no initial props)
• ● (SSG) automatically generated as static HTML + JSON (uses getStaticProps)

┌ ○ /
├   /_app # Entry point of Next.js wrapped by providers
├ ○ /401
├ ○ /404
├ ○ /500
├ λ /api/lms-links
├ λ /api/open-ai
├ λ /api/user
├ ○ /battles
├ λ /community
├ ○ /congrats
├ λ /dashboard
├ λ /jobs
├ ● /lms/[[...page]] (5552 ms)
├   ├ /lms/data/Module-1/Project-2/Machine-Learning-Fundamentals
├   ├ /lms/career/Step-1/Chapter-1
├   ├ /lms/career/Step-1/Chapter-2
├   ├ /lms/career/Step-1/Chapter-3
├   ├ /lms/career/Step-1/Chapter-4
├   ├ /lms/career/Step-1
├   ├ /lms/career/Step-2/Task-1
├   └ [+70 more paths]
├ ○ /login
├ ○ /pagesDemo/cards
├ ○ /pagesDemo/form-layouts
├ ○ /pagesDemo/icons
├ ○ /pagesDemo/register
├ ○ /pagesDemo/tables
├ ○ /pagesDemo/typography
├ λ /profile
├ λ /projects
└ ● /projects/[project]
    └ /projects/CODAC

(back to top)

CAB Server

The CAB Server refers to the Code Academy Berlin Administration Backend and hold various data about the Academy

It is built with the Framework Strapi and offers a GraphQL API.

Queries & Mutation to are to be described in the cabServer folder before being generated through code generation for use in the app:

to regenerate the api types run script

yarn codegen
 # or
npm run codegen

Roadmap

See the open issues for a full list of proposed features (and known issues).

(back to top)

Contributing

Contributions are made by the students of Code Academy Berlin.

1. Fork the Project & Request to be a collaborator
2. Create your Feature Branch
3. Commit your Changes
4. Push to the Branch
5. Open a Pull Request

(back to top)

License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)

Contact

Lucas Dupias - lucas@codeacademyberlin.com

https://github.com/Loukass23

(back to top)

Acknowledgments

• December 2022 - Neon Narwhals Cohort

  • Alberto
    • Job offer page
  • Jan
    • Progress bar dashboard component
    • My Cohort dashboard component
  • Emily
    • Lms page
    • Community page
    • themes design
  • Philipp
    • VS Battle page

(back to top)