Alternatives and detailed information of market-6

https://ceo.baemin.dev

July 6th, 2020 - July 10th, 2020 (5 days challenge)

This project implements the sign up and sign in of 배민상회. At first, a registration process seems very easy and simple, but it requires tons of considerations and design. Especially for our frontend developers, understanding the mechanisms behind the jungle makes us being closer to a full-stack developer.

In short, the server side and the client side are separated into each application chunk and they have their own package.json where all the dependencies and npm scripts are self-reliance. Then we can consider them independently and they became easily migratable for plugging into other server side or client side systems.

TypeScript is our primary programming language which is simply a superset of JavaScript and provides better and enjoyable scripting, debugging and testing throughout the entire workflow powered by its stronger type declarations.

Maintainers / Contributors

Design resource

🎨 Figma

Development

You have to manually install modules and build for each of server side and client side. Fortunately, we use the same script names not to confuse ourselves.

# Inside `/server` and `/client`
% npm install # or just npm i
% npm run dev # will open the port to host the apps, automatically rebuild on change
% npm run build # will produce artifacts

# only for server
% npm start # run the app after build

TDD

We chose to start with TDD, stands for Test-driven development, where firstly write the test cases for every function and API request then implement them passing all those pre-ready tests. In this way, we can build more robust and neat source code. However, sometimes TDD feels cumbersome and we refused to write tests unconsciously, which means at some point we were doing in exactly the reversed way. We didn't expect ourselves to do the perfect job, it's okay.

To check out more about our tests, take a look at __TEST__ directories that reside somewhere.

Test code is written by given-when-then pattern. Specify the testing situtation by the how human thinks. If this test is well written, it can be used for document as well.

Unit

It is just about testing the single unit functions. For example, this tests the validation functions which is validating the user inputs.

API

Using supertest, we can test the API requests. When we send a POST request to sign in, by the each situdation's body, we receive different responses.

Client

Insetead of testing by hand, we can easily check that it's been rendered well, and even event handler check is working properly.

Server Side

Express

Express.js is one of the most popular, powerful, extensible and lightweight Node.js server frameworks.

Currently we're using the following features of Express.

Routing

It is all about server side application. The Express router handles all the requests from the outside world. get is used for visiting pages, post is usually used for manipulating the data. In this project, we didn't consider much about RESTful things.

404 error reuqest could be handled by injecting the handler at the end of an entry script after all the required middlewares and routers are completely registered.

Middlewares

Similar yet the same thing as router. Middlewares could intervene between the middlewares at any point, at any router. Middlewares intercept the request and can early respond without going next to the next middlewares.

Static

Of course Express can serve the static files as usual like compiled CSS, JavaScipt or images and fonts to be loaded and consumed from the client side.

Veiw Engine

By default, browser understands and parses HTML. There are a lot of markup languages that compiles to HTML. Express can be mixed with those view engines and does server side rendering when a user requests a page which is not written in plain HTML.

Basically a static HTML file can be served in a naive way.

res.sendFile(appRoot.resolve('sign-in.html'))

Also the Express render function accepts a template file(.pug) and its corresponding placeholder values.

res.render('welcome.pug', { userInfo })

We are using both HTML and Pug

Session

Express session is like a global storage alive only during each session. According to the official documentation, session data are not stored in cookie directly, but just the session ID. The data are stored in server-side safely.

Database

We use nedb, one of the most popular embedded database for Node.js nw.js and electron. This modules is a JSON-like-file-based datastore that provides mongoDB-like APIs. It's easy to learn, easy to embed right into the existing projects.

Security

We use bcrypt to hash user passwords. The hashed passwords are irreversible and only can be compared with the original password whether its correct or not.

Client Side

webpack

To build and bundle TypeScript sources, we integrate with the webpack build system. ts-loader helps the webpack resolve TypeScript files and transpile with tsc.

{
  test: /\.tsx?$/, // .ts or .tsx(React)
  use: 'ts-loader',
}

We separate configuration files for each development and production mode.

webpack.common.js contains shared webpack configuration like ts-loader
webpack.dev.js runs webpack with development mode. It produces rawly bundled JavaScipt.
webpack.prod.js runs webpack with production mode. It produces artifacts which are compressed for the performance.

Semantic HTML

Semantic HTML is the use of HTML markup to strengthen the meaning of the information in webpages, rather than just display its presentational look. In HTML5, many semantic tags were added like nav, main, or aside. You can also write semantic markup without those tags by merely adding WAI-ARIA attributes to any tags. But according to the MDN, it is better to prefer semantic HTML element over ARIA if possible.

<!-- Non-semantic elements -->
<div>This tag tells nothing about its content</div>
<span>Also this tag means nothing about its content</span>

<!-- Semantic elements -->
<article>
  <h1>This is head</h1>
  <p>This is paragraph</p>
</article>

CSS

Markup language alone looks horrible and literally ugly. CSS gracefully resolves this problem by applying styles whatever we want. Thanks to the new flex and grid layout system, the design possibilities now became almost infinity.

var()

Until this feature came out, we couldn't assign any reusable variables like global colors or sizes. The preprocessors were the king to mitigate this problem. They enable us to define variables, reuse them, and manipulate them with a lot of utility functions. They were good enough to enhance the styling workflow. However, the preprocessed styles are still static assets and cannot act dynamically. The only way to change the property was to explicitly set the values with @media.

var() makes it possible to create global or scoped variables that work like Pub-Sub pattern. All the properties listening to a specific value dynamically change.

/* declare */
:root {
  /* Colors */
  --gray: #777;
  --border-gray: #ddd;
  ...
  /* Sizes */
  --input-msg-height: 29px;
  --transition-time: 250ms;
}

/* use case */
.input-wrapper {
  ...
  border: 1px solid var(--border-gray);

  ...
  transition: opacity var(--transition-time) ease,
}

/* You can change the value responsively */
@media only screen and (max-width: 700px) {
  :root {
    --input-msg-height: 20px;
  }
}

Animation (Dynamic UI)

Dynamic UI is a great way to dynamically interact with the end users. Mostly used for pretty look, but It also could upgrade the UX(user experience). In our project, one of the example is giving a positive feedback by showing green check icon when the user's input is valid and vice verse.

To implement dynamic ui, the transform, transition, and animation are the related css property.

Transition is used for enabling you to define the transition between two states of an element.
Transform property lets you rotate, scale, skew, or translate an element which means actullay changing the element.
Animation: Compared to transform or transition, Animation can specify change by using @keyframes. keyframes detailize the transition and depend on each status using from and to statement or specifying the each %'s status.

@keyframes springZoomOut {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  1% {
    transform: scale(0.305023341375187);
    opacity: 0.007176201964553;
  }

  ... ... 99% {
    transform: scale(1.001268916679594);
    opacity: 1.001812738113706;
  }
  100% {
    transform: scale(1.001145589595984);
    opacity: 1.001636556565692;
  }
}

.check .icon {
  animation: springZoomOut 0.6s linear forwards;
  ...;
}

Responsive Design

All the pages we've created always fit best to every screen size. It's called responsive design and you can achieve this with many technologies like CSS and JavaScipt as all you know well.

Sign Up Page

Desktop

Mobile

Flexbox

Flex layout is perfect for faster responsive design and development. Flex elements are so flexible that they are automatically divided into suitable portions using percentage.

For example, given the HTML and CSS

<div class="parent">
  <div class="child-1"></div>
  <div class="child-2"></div>
</div>

.parent {
  display: flex;
  flex-direction: row;
}

.child-1 {
  flex: 1;
}

.child-2 {
  flex: 2;
}

Totally the sum of the flex parent's child elements' flex value is 3. Then .child-1 occupies 1/3 and .child-2 occupies 2/3 of the parent's space.

@media

This CSS feature constraints styles at specific situations.

.content {
  width: 500px;
  height: 500px;
}

@media only screen and (min-width: 1400px) {
  .content {
    width: 800px;
    height: 800px;
  }
}

The .content's size changes when the screen width exceeds 1400px. You can simplify it by refactoring the codes using var() we've just mentioned above.

:root {
  --content-size: 500px;
}

.content {
  width: var(--content-size);
  height: var(--content-size);
}

@media only screen and (min-width: 1400px) {
  :root {
    --content-size: 800px;
  }
}

Then we can reduce the duplicate code and unexpected side effects.

License

MIT License

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

woowa-techcamp-2020 / market-6

Programming Languages

Labels

Projects that are alternatives of or similar to market-6