Personal Quiz 🙂

• Team Number: 1
• Git Repository: GitHub Link
• Live Demo: YouTube Link

Contents

• Personal Quiz 🙂
  • Contents
• Description of the Application 📚
  • Flow Chart
  • User Interfaces
• Organization of Code 💻
  • Overall Structure
  • Directory Structure
    • Client Directory
    • Server Directory
  • Design Patterns
    • Atomic Design Pattern
    • Observer Design Pattern
    • Provider Design Pattern
    • Routing Design Pattern
  • Main Functions
    • Functions in Client
      • pages/_app.js
      • context/AppContext.js
      • components directory
      • pages directory
    • Functions in Server
      • index.js
      • routes/{path}.js
      • model/{schema}.model.js
• Main Challenge 🔥
  • Work in Collaboration
    • Challenge
    • How to Overcome
  • Libraries & Frameworks
    • Challenge
    • How to Overcome
  • User Interfaces
    • Challenge
    • How to Overcome
• What We Learned 🧑‍💻
  • Work in Collaboration
  • Libraries / Frameworks / Tools
    • Details
• Issue and Known Bug 🐞
• References 🌿
  • Work in Collaboration
  • React
  • Next.js
  • Material UI
  • Node.js
  • Axios
  • Heroku
  • UI design & CSS

Description of the Application 📚

Flow Chart

This is flow chart of our application.

User Interfaces

• Home Page

  
  • Input the maker's quiz code.
  • When writing the quiz code, the button for next page appears.

• SignIn/Up Page

  
  • Putting first name, last name, username, and password, users can sign up our website.
  • By matching the username and password, users can access their personal page.

• Personal Page

  
  • If there is no quiz made before, there is a 'make quiz' button in the personal page.
  • By clicking the button, the maker will make his/her own quiz.
  • After making a quiz, personal unique patterns are generated.
  • If friends solve quizzes, the patterns start to be completed.
  • They can filter the results according to the colors.

• MakeQuiz Page

  
  • Makers can modify options and question contents.
  • They can add question, add options or delete options.

• ShareLink Page

  
  • By clicking 'share quiz' button, users can copy the texts with quiz link in clipboard.

• StartQuiz Page

  
  • Solvers can set their own nickname before starting the quiz.
  • The nickname cannot be overlapped with each other.

• SolveQuiz Page

  
  • On the top, there is a progress bar to show how many questions remain.
  • There are at least 2 options, and maximum is 4.
  • By right arrow button, they can go to the next page.

• LeaveResult Page

  
  • Solvers can view the remaining patterns they can fill up and their scores.
  • They will choose one of colors and one postion they want to leave their results, and they can leave a small message with their name and score.

Organization of Code 💻

Overall Structure

Directory Structure

This is Directory Structure of our application

Client Directory

• Reusable components are stored in the component directory.
• Global store component is stored in the context directory.
• Pages of the application are stored horizontally in the pages directory.

Server Directory

• Schema of the model is stored in the models directory.
• Paths that request data from DB are stored in the routes directory.

Design Patterns

Atomic Design Pattern

• Divide the components and pages by Atomic Design Pattern.
• Why did we use Atomic Design Pattern?
  • Increase reusability of components.
  • Increase scalability of pages and components.

Observer Design Pattern

• Pages communicate with components by props.

  return (
    <ThemeProvider theme={theme}>
      <Nav isUser={isUser} quizCode={quizCode} />
    ...
  )

• Why did we use Observer Design Pattern?

  • Increase reusability because components receive data only through props.
  • Components and pages can be managed independently.
  • Make pages and components speak to each other.

Provider Design Pattern

• Share data across the tree descendant nodes with Context API

  function App({ Component, pageProps }) {
  const [isUser, setIsUser] = useState(false)
  const [quizCode, setQuizCode] = useState(null);
  const [quizNickname, setQuizNickname] = useState(null);
  const [score, setScore] = useState(0);
  
  return (
    <AppContext.Provider
      value={{
        isUser,
        setIsUser,
        quizCode,
        setQuizCode,
        quizNickname,
        setQuizNickname,
        score,
        setScore
      }}
    >
      <CssBaseline />
      <Layout>
        <Component {...pageProps} />
      </Layout>
    </AppContext.Provider>
  )}

• Why did we use Provider Design Pattern?

  • Every components and pages can share the same state of application.
  • Solving prop drilling in React.
  • Make pages speak to each other.

Routing Design Pattern

• In server, request from client was divided into routes directory by path.

  app.use('/api/users', require('./routes/users'));
  app.use('/api/quizzes', require('./routes/quizzes'));
  app.use('/api/scores', require('./routes/scores'));
  app.use('/api/messages', require('./routes/messages'));

• Why did we use Routing Design Pattern?

  • Increase readability and ease of management by Store code separately.
  • Easy to debug by tying them together with the same personality.

Main Functions

Functions in Client

pages/_app.js

• APP()
  • Top component of every React components.
  • Wrap all pages with the global layout.
  • Especially, wrap all components with a global state using Context API.

context/AppContext.js

• createContext(null)
  • Creates a global store used in the application.

components directory

• Components like Nav are rendered differently depending on the state of the page.
• State of the page is transferred with props.

pages directory

• Render each page of the application.
• Pages created with [id] directory like scoreBoard provides dynamic routing using queries.

Functions in Server

index.js

• app.use('/api/{path}', require('./routes/{path}'))
  • By using the router, the structure of the server has been simplified and easily scalable.
• mongoose.connect()
  • Connect Node.js server & MongoDB

routes/{path}.js

• router.post()
  • Post CRUD-related requests to MongoDB.

model/{schema}.model.js

• mongoose.model("{Name}", {name}Schema)
  • Specify the structure and conditions of the information to be stored in the DB.

Main Challenge 🔥

Work in Collaboration

Challenge

• Lack of collaborative development experience.
  • Expressing what we want about codes in words was difficult.
  • Distributing works among team members was not efficient initially.
• Difficulty in communication between team members.
  • Lack of uniformity among team members' codes.

How to Overcome

• Re-divided our tasks
  • Maker flow, Solver flow, Database, and CSS(design).
• Set Development rules
  • In commit messages, division of branch, and pull requests
  • Try to understand others' codes and improve communication quality.
• Using collaboration tools
  • Figma, Miro, and Notion for works other than development
  • Fully understood what each member said by visualizating screen(GUI) and diagrams.

Libraries & Frameworks

Challenge

• Lack of libraries and frameworks experience
  • Dealing with dynamic routing in Next.js.
  • Understanding concept of SSR and SSG in Next.js.
  • Understanding and utilizing Grid in Material-UI.

How to Overcome

• Sharing contents that learned newly or applied to the code
  • Share the reference links or videos.
  • Try to understand the philosophy and patterns of libraries and frameworks.
• Sharing built codes regularly
  • Tried to fully understand features of functions in each frameworks with two weekly team meetings.

User Interfaces

Challenge

• Hard to modify code neatly with desired UI.
  • As UI was changed, we needed to modify code structures.
  • To implement immediate feedback on users' actions without errors for better UX was difficult.

How to Overcome

• Make consistent and resuable UI for high utilization.
• Rather than js file, modifying css to make visual variations of components.

What We Learned 🧑‍💻

Work in Collaboration

• Define overall structure and flow in application makes efficient progress
• Importance of sharing progress
  • Set Development rules
  • Review team member's code
• Importance of visualization
  • Visualize material (flowchart or GUI) so that we can look in the same direction.

Libraries / Frameworks / Tools

• Libraries and frameworks have their philosophy.
• Have to choose a framework that fits the concept of project.
  • Facilitate high scalability and maintenance.

Details

• React
  • Designed to separate and synthesize components to maximize the reusability.
  • Write code concisely using React hooks.
• Next.js
  • Easy to develop separate pages and components.
  • Easy to implement dynamic routing.
  • Easy to implement with SSR and SSG for SEO.
  • Provides functions related to router and image.
• Material UI
  • Easily implement UI without writing css one by one.
  • MUI's sx option allows to insert the specific css.
• Mongo DB
  • Can store many different forms of data.
  • MongoDB has a good scalability and flexibility.
• Vercel & Heroku
  • Easy to deploy of client and server

Issue and Known Bug 🐞

• We implement our application with React Hooks
  • But, Next.js unsupport some React Hooks.
  • So, we initialize contextAPI's value with query.
  • You can see this information in here
• The pattern implementation of the personal page portion could not be completed.

References 🌿

Work in Collaboration

• What is Good Commit?

React

• React Hooks
  • useContext Hook
  • useEffect Hook
  • useState Hook
• State Management
  • Context API vs Redux vs React Query

Next.js

• Documentation
  • Next.js Documentation
• Features of Next.js
  • 44Bits YouTube
  • 코딩앙마 YouTube
  • 데브리 YouTube
• CSR, SSR, and SSG
  • NAVER - What is SSR
  • SSR & SSG
• Resolving Error
  • React Hydration Error

Material UI

• MUI Documentation

Node.js

• Connect Node.js Server and MongoDB
  • John Ahn YouTube
  • run_dev_aiden Tech Blog

Axios

• Ajax vs Axios vs fetch

Heroku

• Deploy Node.js Server with Heroku

UI design & CSS

• Bauhaus pattern generator