React Coding Challenge of Stan.

LIVE - https://alikadir-demo.vercel.app

React Coding Challenge - https://github.com/StreamCo/react-coding-challenge

Quick Start

$ git clone https://github.com/alikadir/javascript-demo-streaming-app.git
$ cd javascript-demo-streaming-app
$ npm install
$ npm start

📄 What Was Expected Of Me At The Challenge

👨‍🎨 What I did

Development Proccess

Firstly, I'm a design-obsessive person, so it must be a nice design 🤓

I've designed this project at first on Figma.

I've decided that which components will be when I designed on Figma, That was important.

And then,

I've created a react project via Create-React-App and cleaned all of the unnecessary files and folders in the project. I created a folder structure according to the component structure in the design.

.  
└─ src
    ├── assets
    │   └── store
    ├── components
    │   ├── app
    │   ├── auth
    │   ├── common
    │   ├── layout
    │   └── page
    ├── constants
    ├── services
    ├── styles
    │   ├── auth
    │   ├── common
    │   ├── layout
    │   └── page
    └── tests
        ├── component
        │   ├── app
        │   └── page
        └── service

And then,

I've created all components as primitive and I created a project layout structure also using react-router package.

We've come to an exciting point. to write Test,

I've written the test using the TDD approach. I've written the content service layer test then write the service layer. Also, I've used Mock Service Worker for testing api communication.

Especially It was fun to code in the Test Watching Mode 😎

You can run the test with the following code,

$ npm test

Finally, I've perfected the project design by writing CSS and using Ant Design

Home Page

Detail Page

404 Page

🕵️‍♂️ Q&A

Why Ant Design?

Ant Design has a lot of components that have a nice design and easily customizable. With these components, we can rapidly develop an enterprise-level application.

Are there any improvements you could make to your submission?

Yes, if I have more time, I would make improvements to the following topics,

• I would change the react-scrips package to react-app-wired because more flexible that injecting configs than react-scripts

Also I would spend time for,

• SEO optimization
• Responsive design
• Server-side rendering
• Remove Ant Design
• Reduce load time
• PWA

That's all, Thank You.