P1 Project

Interactive web presentation for FactCheck Framework

Hynek Zemanec

July 5, 2022

Getting Started

Agenda

  1. Introduction
  2. Design
  3. Architecture
  4. Deployment
  5. Challenges
  6. Demo

Introduction

NextJS

Language

TypeScript

TypeScript

Design System

MUI

Material UI

Online Editors

Code Mirror

Code Mirror

Package Manager

Yarn

Yarn

Goals

  • Introduce FactCheck framework
  • Interactive & Approachable Explanation
  • Aid onboarding
  • Showcase & Offer projects
  • Point of Contact

Design

Conceptual Map

Sections

  1. Landing Hero
  2. Concept Slideshow
  3. Gallery
  4. Architecture
  5. Demo
  6. Projects
  7. Shortcomings
  8. Team
  9. Contact

Graphic Design 1/2

Figma Design

Graphic Design 2/2

Logo Iterations

Architecture

Directory Structure

.
└── fact-check-landing
    ├── components
    ├── configs
    ├── layout
    ├── pages
    ├── public
    ├── sections
    ├── slides
    └── styles

Component

Next Component

Composition

Component Composition

Data: projects

.
└── fact-check-landing 
    └── public
        └── data
            └── projects.json
Projects Format

Data: challenges

.
└── fact-check-landing 
    └── public
        └── data
            └── challenges.json
challenges Format

Static Export

Build

Deployment

Gitlab Pipelines

GitLab
Deployment Pipeline

Manual Deploy

$ yarn deploy

or

$ yarn export

Base Path

next.config.js

const nextConfig = {
  ...
  // Change for production build
  basePath: "/~hynekz20/fc",
};

Challenges

Gitlab Runners

Gitlab Runners

Editors

CORS: Cross-Origin Resource Sharing

Conclusion

Project

  • Interactive Storytelling Introduction to FC
  • FC Projects on glance
  • Visually Consistent & Mobile First
  • Static Export
  • Extendible Architecture
  • CI/CD

Resources

DEMO