DEV Community: Kenan Sejmenović

Developing 1st game ever: 9 lessons learned (race game, Unity)

Kenan Sejmenović — Wed, 03 Aug 2022 15:00:40 +0000

First, let me show you a trailer of the game. Don't worry, it's only 1:24 minutes long.

Want to play?

Here is the download link. (in-game hold T to turn on a car)

Disclaimer

It isn't so much of a technical blog, although the whole source code of a game you can find here.
The blog should teach you the lessons a programmer from outside the game-development world learned developing his first game ever.

Beware, it's licensed.

Introduction

It's a 3D race game with advanced manual shifting.
The game was done in less than a month by me and my colleague, and this is my (but also his) first game ever made. The game was made for the competition contest.
A lot of new has been learned, and I think that this blog should give you a few lessons which I learned along making this game.

Technologies used

The game engine is Unity.
Scripting is done using C#.
For the versioning system, I used Git (and Github) of course.

Coming from the web developer world

I've been working mainly on full-stack projects on the web, so this was a new challenge for me.
Coming into the gaming world has been a beautiful experience in which I learned a lot.
It is fascinating to me how the whole system functions in games, and how much knowledge is required to bring entertainment to the gamers.
A lot of the same problems arise in the both web and gaming world, but I noticed that it is a lot easier to hit hardware boundaries accidentally in game development.
A whole new world has been open to me upon learning the cycles in which Unity operates.
Although I don't enjoy gaming that much anymore, I would like to say that this was enlightenment and that I'm impressed.

A word about game engines and Unity

The most interesting to me was the execution order that is run by Unity.
Upon learning that, I had, and still have, a lot of questions - where to put my piece of code so it doesn't bug the whole game down.
I have a lot of questions - about shaders, meshes, and all that magic stuff. Although the game can obviously be made without knowing a lot of the answers (at least in depth that I respect as the "good" answer), I don't feel the satisfaction of knowing all the inner details - how it functions under the hood.
I know that a big part of game engines is based on linear algebra, and although I know the operations - I didn't make my own engine, and I don't think there's a better way to understand a game engine better than to make your own. Making the game engine isn't my priority now, but maybe someday I will try to make my own for fun.
The question could be referenced for a lot of things - you know how to write code but don't know the assembly it resembles, why don't you learn that also? The answer to that maybe lies in the curiosity of the programmer that is reading this - which depth satisfies you?
Anyway, learning the execution order is the crucial thing when working with game engines - and before you realize that upon not being able to optimize a game to a playable level, maybe it is better to learn the execution order beforehand, so you avoid a lot of the headaches.

Challenges (mostly in math)

My part about the game was to make realistic manual shifting. I enjoyed it.
The thing about the manual shifting could be seen in this photo:

(reference: https://www.researchgate.net/figure/Torque-speed-characteristics-of-electric-motors-and-internal-combustion-engines_fig4_317051708).

Force applied to wheels isn't instant (in internal combustion engines, of course), and, as you can see, it is being carried over the line that looks very similar to a sine wave. I have done exactly that in the code, so that part feels realistic. To get that skewness in a line I scaled the angle passed to the sine wave function.
Also, when shifting from e.g. 1st gear to 5th gear - the car should turn off. Torque is being carried between adjacent gears. How I've done that part can be seen below (it's a sketch obviously, but it conveys the message):

Solving heat challenges was also interesting to solve. Feel free to take a look.
It was also interesting to tackle audio problems, which I solved using audio pitch and audio intensity, so it sounds realistic.

A few words about the deadline

The game was done during the semester, so it was stiff and tense with the time. A lot of things could be implemented and fixed, but - time is the final judge. It was done a few days shy of a month with no prior experience in making games.

What went good

Before self-criticism, it's important to acknowledge what went well. So here it is:

I've worked with Git seamlessly, also following the Gitflow concept (more about it here)
math become sooo useful (simulating torque with a sine wave, transforming audio pitch...)
delivered a game that works
got my hands dirty in game development, which I have never planned
tackled a surface of problems with graphics
orientation in 3D space
how torque works in internal combustion engines
how the input system is done in Unity (beautifully btw.)
deeply understood the benefit of separation of configuration from code (e.g. you can change the whole configuration of a car in JSON, even when the game is installed)
stood on the shoulders of a giant - working with free assets provided by the Unity community went unimaginably easy
video editing could be done really fast if you don't have a lot of time left

Recognized mistakes made

Huh.

sometimes audio of an engine doesn't catch up (there's some bug with coroutines)
an opponent car shouldn't be driving in a "God mode" (it was a quick solution though)
the graphics aren't realistic
a better indication that the car is turned off
it's a bit too hard
there should be more obstacles, so it could be more interesting
a car should be able to drift
a car should be able to roll over

9 learned lessons

1. There is a lot to be learned from developing games, even though I don't plan to develop games professionally.

2. Math is hugely usable in game development, I mean a lot.

3. Unity has beautiful, useful tutorials and a big community.

4. It's incredibly easy to meet opportunities to manifest your knowledge about data structures, algorithms, and design patterns in game development because pretty quickly you'll hit performance boundaries, which is nice.

5. Pick a Git strategy or pattern, choose conventions and follow them, you and your team - it's worth it.

6. It's possible to make a game with no prior game-developing experience (although with a few years of programming experience) on a level which is Manual: Desire, or better said - beyond that level, because you have this blog, and I didn't have it.

7. C# is cool (although don't quite know why it has a lot of unneeded syntactic sugar, myb it's better to focus on performance, but anyway - it rocks).

8. Developing a game is a fun challenge.

9. The realization that it's just magic and we're all incredibly lucky to live in a time where you can portray realistic 3D games on a computer that, in the end, only recognizes 0 and 1.

Looking at the game a few months later

It was fun. It could be done wiser. A lot of new has been learned. Saw a completely new world.
I will hit graphics boundaries in another sector of IT, but it's good knowing that a lot of challenges and lessons could be tackled in this field.
Glad that the project was finished just one week off the estimated time, which could be seen as the biggest win.

A word about the beautiful tool - Git

I "learned" Git sometime before, but never had practice with a team.
This was an eye-opening experience, finally, a lot of lessons came into play. I rocked Git only through a console and let me say - it's wonderful.
Knowing how to use Git beyond basic commands is like having magic power at the tips of your fingers, like you obtained a crystal that controls time - or better said: versions.
The next step is to deeply understand Git internals, although I skimmed through internals, there is more to reach, there is more to explore.

Final word

Thanks for reading.
Although it wasn't technical as I like it to be, it was worth writing. A few months passed by, so a lot of technicalities have been forgotten, sorry for that.
Fellow experienced game developers - if you are reading this for whatever reason - leave us your tips below in the comments, we will surely appreciate it.
If you want to - feel free to contribute, with ideas or with the code.

15 Parts of How I Built Food Delivery App, Lessons & Ideas through Laravel and Vue

Kenan Sejmenović — Wed, 07 Oct 2020 18:09:43 +0000

note: currently, website is down, I'll fix it soon

Introduction

There are a lot of apps made for food delivery for big cities, but not a lot of them are made for the small cities.

The article covers how the app is made, its structure, common problems, and solutions.

Why article might be important to you?

Do you plan to make a delivery app, or you want to buy one, or are you interested in starting a delivery app?

Or you want to see how a problem can be solved using the web?

Then, this content is for you.

“Make sure you understand the fundamental principles, i.e., the trunk and big branches, before you get into the leaves/details, or there is nothing for them to hang on to.” - Elon Musk

Here is the app. Take a look.

There is a big chance that the app data will be populated by random users because access to almost every account is open to the public. Please don't populate the application with unrelated stuff. If you cannot log in, try to make a new account.

Link: https://dostava-online.com

User credentials:

Phone number: +387 99/999-999
Email: johndoe@gmail.com
Password: 123123123

Link: https://dostava-online.com/restaurant

Restaurant credentials:

1
- Phone number: +387 22/222-222
- Email: ristus@gmail.com
- Password: 123123123
2
- Phone number: +387 33/333-333
- Email: star@gmail.com
- Password: 123123123

Link: https://dostava-online.com/admin

Admin credentials:

Phone number: +387 11/111-111
Email: dostava.online@gmail.com
Password: 123123123

Overview

on the main page are shown:
- top 3 foods, according to the selling/ratings
- all restaurants sorted according to the sales/ratings/sponsorship/availability
cart for users
additions for foods, free and paid additions
multiple user addresses
delivery/pick up as soon as possible or at the desired time
delivery/pick up food
6 types of notifications for users; order is:
- accepted
- not accepted
- in the making
- in delivery
- delivered
- you can come to pick up the food
ingredients of each dish
one click for the switch of the food availability on the restaurant side
complete CRUD of foods for restaurant
food categories
admin dashboard for sales overview, confirmations, sponsorships

Technical overview

Laravel 6, Vue 2.0, Vuex, Vuetify, Socket.io (Laravel-echo), Node, Redis, MySQL, OAuth 2.0
Webpush notifications implemented for users and restaurants
Slack notifications for admins
Multiauth
Caching of the majority of cachable resources - on back end and front end
Backup 3-5 times/week
Image watermarks
No Laravel mix; advanced webpack configuration
Full tested; ~800 tests (features and unit tests)
Fully extendable and testable structure for algorithms for sorting the top 3 foods on the back end
user/restaurant/admin SPAs separated
HTTP 2.0 for lazy loading Vue components; production raw ~400 files
Fully separated API and front end
Custom artisan commands for production testing
Easily extendable for multiple cities
Easily connectable to the mobile app (separate API made with that in mind)
Mobile-first design

Database plan

Number of tables: 46

Problem: cart items should be seen from all the devices, so saving items in the cookies memory or browser database is not going to help because the user is going to check the cart from the various devices
Solution: complete cart concept is on the back end

Problem: a history of the transactions
Solution: same tables of the cart solution prefixed with finished

Problem: Multiple user addresses (so the user can type in address once and access it anytime with ease)
Solution: home_address on main user table, and user_address table; one-to-many relationship

Problem: cart also should contain paid and free additions
Solution: shopping_cart, shopping_item, shopping_item_free_addition, shopping_item_paid_addition; one-to-many relationships

Problem: duplication of free/paid additions and ingredients
Solution: free/paid additions and ingredients link tables

Problem: some restaurants don't work on the weekends, but all of them work on weekdays on regular
Solution: separate table for weekends with one-to-one relationship

Problem: different delivery prices for the different locations
Solution: default_delivery_price on restaurant table and delivery table; one-to-many relationship

Problem: monthly restaurant fees
Solution: Laravel scheduler empowered with cron

Problem: food categories
Solution: separate table, one-to-many relationship

There are also Telescope tables, OAuth tables, notifications, failed_jobs, migrations, three types of users (user, restaurant, admin)...

Order process

Put items with/without free/paid additions in the cart from the main page/restaurant page
Go to the cart page
Choose if you are coming for the food or desired address for delivery
Choose if delivery/pick up is as soon as possible or at the desired time

After the successful order, the restaurant can either accept or decline the order.

If the 10 minutes pass and the restaurant still didn't accept or decline the order, the user can decline the order.

Declining from the restaurant can happen for various reasons, such as the restaurant forgetting to set unavailability to the dish.

Order process visualisation

Order process diagram, user side:

Order process diagram, restaurant side:

History overview

The history problem is easily solved. After the order is finished, the job is added to the Laravel queue, so its non-blocking.
What job will do is a transfer from the active carts to the finished carts, everything has finished table - cart, items and free/paid additions.

The problem that arises is changing the price of the additions/food in finished orders because finished items/additions are linked to the current info. The solution is to make a serialized snapshot of relevant data at a time. Not implemented in this system yet.

Queues

There are 6 queues required for the application to run correctly (250-350 MB of RAM).

All of them are powered through Redis.

general queue
queue for restaurant notifications
queue for user notifications
queue for admin notifications
queue for processing images

The general queue is at the frontier for the most other queues and for the non-critical data.
Because this application is heavily notification dependent, there are 3 separate queues for the notifications, of which restaurant queue has high priority.

Cron jobs overview

In the background of this application, 6 processes are running alternately.

monthly fee event (calculate restaurants debts)
hourly check which sponsorship is expired
hourly remove old inactive shopping carts
daily clean old backups
daily backup database
weekly backup files

Security

Laravel framework is trying to be as secure as possible.

Every user input is checked both on the client and server-side.

Backup is done daily.

Many barriers to preventing DOS attacks, from the application side and at the OS.

Validations and notifications

Every form is done with a heavy focus on the details.

From the typing incorrect answers to the correct and recommended.

Notifications are done via web-push notifications and in-application notifications. In-application notifications are done using a basic Laravel package that does (almost) a great job.

Data duplication in the database

A lot of the food has the same ingredients, so having a lot of ingredients duplicates does not make any sense.
The same situation is with the paid and free additions.

The solution is to make link tables. So, e.g. multiple dishes can link to the same ingredient, without duplication.

Deactivation

Food, paid/free addition, user, restaurant, admin tables are all soft-deleted, which means that the data will remain in the database, just it won't be shown anywhere like it was deleted. Data remains for analytics, marketing purposes...

Business model

The business model at its core is the same as the Grubhub model. 10% of the order price. A business model based on the value, the best type of business model (subjective).

App profits could be extended by bringing in delivery extension, so the independent delivery man/woman can work and make some cash.

Story

The web application is made for the small cities and the places around the city. Most of the big food delivery companies include the only city and that is the place where this application differs from the others.

The application is a nice startup for the focus on the first city. The structure is easily extendible for multiple cities.

The application was translated from Bosnian into English in a rush. There are some English mistakes.

This is also my second big project, which I did for the 6 months and 21 days, with only 3 days rest. #hustleCulture 🤣

What I learned:

Laravel - in and out
Vue - a lot of it (community, thank you for this gift)
Webpack - headache is the correct translation
MVC - the structure of in-development independent separate parts (if I have to describe it using my words)
SCSS - nice addition to the basic CSS
Real problem of software development: maintaining the same speed of development in a big, robust system where it's so easy to lose the pace; so the only way to go is quality, clean code, implementing defined principles
Redis - fascinating pub-sub; fascinating speed; and the hard thing, not coupled to the Redis strictly, but often related to it - cache invalidation... Nice place to look for logical creativity.
Simple is better
Better spend more time at the planning the database structure than to support bad design weeks/months later
ORM is the nice, fast way to go (didn't have touch with the systems where performance is the real issue, but I assume then the ORM is not the best option)
Ubuntu is easy, understanding the permission system in the multi-user operating system is one of the key concepts to the security (next stage for me is cloud). The scaling problem for the VPS-based solutions is easy to notice, so the huge arise in the cloud makes sense.
Using packages is a messy thing
GraphQL is a way to go in the big APIs, REST will waste so much because of its inflexibility
Developing detailed front end schemes before even deciding which technologies to use on the back end is the way to prevent a lot of the regrets
Writing important code without testing is a crime
PHP is nice and evolving, but at the enterprise always Java/C# is gonna be used
Most of the deaths on this planet in the last 25 years are caused by Javascript. And that's a fact 😂

Thank you for reading. ☄️

Looking for the portfolio inspiration and code? Maybe Vue? 🤫

Kenan Sejmenović — Thu, 24 Sep 2020 16:47:44 +0000

Do you need inspiration for building your portfolio? Grab some inspiration from my project.

Technologies used:

Vue (vue-router)
CSS (flexbox, grids)

Simple, blazing-fast unique portfolio - click here to see it.

Here you can find the source code. 🎯

Mobile-first design.

MIT license - so, feel free to use it.

Lighthouse - every rating over 90. 🚀🚀🚀

Do you want to be a contributor? Here are some ideas for improving the site:

showing bottom tooltips of technologies on the small screens
adding a LinkedIn icon at the top left
a better solution for showing text at About page on different screen sizes
making it PWA (Progressive Web App)
next-gen images format (webp), except for unsupported browsers e.g. Safari

From the previous commits, you can see that it was performing page statistics. The same can be done from automatic web server logging. It was unnecessary, so I removed it.

Thank you for the huge support on my first (previous) post ever. Hope this one will also help you like the previous one.

Weather app in React, Redux, Typescript, and Tailwind

Kenan Sejmenović — Sun, 02 Aug 2020 18:20:01 +0000

Hello reader 👋👋,

In this article, you will learn how to make basic weather app in React, Redux, and Typescript.

The React part is written in Typescript.

The Redux part is written in plain Javascript for the sake of simplicity.

This article is meant for beginners in React. I have about a year's experience in Vue and Vuex before I started learning React and Redux. It's best suited for those readers.

Let me show you the app, then we will mix reverse engineering and going from step one to the final app.

Hope you liked it! If you don't have time to read, here is the source code. 👈

Let's start

Requirements: node.js and npm.

Step 1

Install packages

Let's first execute commands, then I will explain what each command does.

Open your terminal and execute commands:

npx create-react-app weather --template typescript

cd weather

npm install react-icons react-redux react-router-dom redux redux-thunk tailwindcss postcss-cli autoprefixer @fullhuman/postcss-purgecss @types/react-redux @types/react-router-dom

Take a look at why React does not put dependencies in devDependendencies.

The first command builds React template in Typescript. We named our app "weather".

The second command moves us into the application directory.

The third command installs packages:

react-icons - for fancy icons

react-redux - for connecting Redux with React

react-router-dom - for enabling many routes and SPA navigation (SPA - Single Page Application)

redux - for state management

redux-thunk - for enabling asynchronous behavior in redux

tailwindcss - CSS framework for easier styling

postcss-cli - for enabling minifying app for production (CSS file gzipped from ~140kb to ~3kb... WORTH IT 🧐)

autoprefixer - for parsing CSS and adding vendor prefixes to CSS rules

@fullhuman/postcss-purgecss - PostCSS plugin for PurgeCSS

@types/react-redux - type definitions for react-redux (for Typescript)

@types/react-router-dom - type definitions for React Router (for Typescript)

Let's start application:

npm start

Step 2

Remove auto-generated code

Let's remove minimal code that interferes with our goals, for now.

Go into ./src/App.tsx and remove code inside return statement to look like:

return <></>;

At the top you can see:

import logo from "./logo.svg";
import "./App.css";

Remove both imports and delete ./src/App.css.

If you see a white screen on your browser, you are good to go.

For now, it's good. Delete other useless code if you want, but to keep this post shorter, I will cut it here.

Step 3

Building structure

We need to make five new directories inside ./src.

Inside ./src make:

actions
assets
components
pages
reducers

Explanation:

actions - for storing redux actions and action types
assets - for static content, like images
components - it's always a good thing to strive for the Single Responsibility Principle. In a bigger project, you will be able to use the same component multiple times and save time for everyone
pages - a place of clean code and separate concerns where you connect routes to components
reducers - place where dispatched redux actions changes the state of the application

Step 4

Enable Tailwind

Let's add Tailwind to the application.

Open ./src/index.tsx and add:

import "./tailwind.output.css";

Also, add ./tailwind.config.js, so we learn how to add custom properties to Tailwind.

./tailwind.config.js

module.exports = {
  theme: {
    extend: {
      width: {
        "410px": "410px",
      },
    },
  },
};

Before npm start and npm run build we want to build Tailwind also.

To solve this problem, in "scripts" tag in package.json add:

"build:tailwind": "tailwind build src/tailwind.css -o src/tailwind.output.css",
"prestart": "npm run build:tailwind",
"prebuild": "npm run build:tailwind"

Adding "pre" before the start and build, will run the desired command before every npm start and npm run build.

As you can see, there is src/tailwind.css, which is not created yet. So, let's do it.

./src/tailwind.css:

@tailwind base;
@tailwind components;
@tailwind utilities;

Stop watching changes in code by npm by hitting Ctrl + C on Windows in the terminal.

Again, run npm start to compile code. You should now see something like in console:

npm run build:tailwind

And tailwind.output.css should appear in ./src.

Step 5

Prepare Redux

In ./src/reducers make:

./src/reducers/ajaxReducer.js:

const initialState = {
    weather: {},
  };

  export default function (state = initialState, action) {
      switch (action.type) {
          default:
              return state;
      }
  }

We will fetch data from OpenWeatherMap, so we need a place to store data.

Data will be store in the weather, in the state.

For now, let's write the boilerplate code.

./src/reducers/index.js:

import { combineReducers } from "redux";
import ajaxReducer from "./ajaxReducer";

export default combineReducers({
  weatherReducer: ajaxReducer,
});

At index.js combine all the reducers. We have only one - ajaxReducer in this project, but it won't be always the case.

At a large project, having index.js - a central place of Redux reducers is a good thing, "clean code".

Time for action.. actions!

Let's make types.js where we store all types of Redux actions. It's like ./src/reducers/index.js for actions.

In this simple project, we will only have one action.

./src/actions/types.js

export const FETCH_WEATHER = "FETCH_WEATHER";

And, let's make one and only ajax request/redux action. Before that, you need to go to the OpenWeatherMap and make a token.

A token is a requirement for using OpenWeatherMap, that is generous enough to give us a very high number of API calls for free.

./src/actions/ajaxActions.js

import { FETCH_WEATHER } from "./types";

export const fetchWeather = () => async (dispatch) => {
  const ids = {
    Munich: 2867714,
    London: 2643743,
    California: 4350049,
  };

  const fetches = await Promise.all(
    Object.values(ids).map((e) =>
      fetch(
        `https://api.openweathermap.org/data/2.5/forecast?id=${e}&appid=` // here you put your token key
      ).then((e) => e.json())
    )
  );

  dispatch({
    type: FETCH_WEATHER,
    payload: {
      // iterating through object does not guarantee order, so I chose manually
      Munich: fetches[0],
      London: fetches[1],
      California: fetches[2],
    },
  });
};

I chose those cities because I like them. You can pick the cities which you like. Here you can find IDs.

Explanation of ./src/actions/ajaxActions.js:

Import type, so we can connect type with defined action
Make an object of city names and IDs
Store fetched and parsed JSON into constant fetches. Use Promise.all() for fetching data of cities concurrently. URL needs city ID and also Promise.all() expects argument of an array type. Do it by making an array from the object of cities and their ID with Object.values(). Iterate through it with a high-order function map, which returns the array. Fetch does not parse JSON, and it's asynchronous, so first wait for fetching data. Then "unpack" (parse) it by another asynchronous method: JSON. You could use await keyword again, but I prefer then, it seems like beautiful syntax.
In the argument, you can see that we grabbed dispatch, so we can later dispatch an action to the store. If it isn't understandable, read about Javascript closures.
In the end, we call dispatch and pass an object with two keys: type and payload. In type, we link type from ./src/actions/types.js, and in payload, we store data returned from API. There are a lot of ways to not duplicate yourself in this code, but I chose this way for simplicity's sake.

We left ajaxReducer.js unfinished. It's time to complete it.

./src/reducers/ajaxReducer.js

import { FETCH_WEATHER } from "../actions/types";

const initialState = {
  weather: {},
};

export default function (state = initialState, action) {
  switch (action.type) {
    case FETCH_WEATHER:
      return {
        ...state,
        weather: action.payload,
      };
    default:
      return state;
  }
}

As you can see, Redux does not allow us to change just one bit of a state from reducers. First, destructure the current state. Immediately after, overwrite weather key with action payload from ./src/actions/ajaxActions.js.

Step 6

Connect app to redux

Let's first make the main file of Redux. If you worked before with Vuex, you will recognize a pattern here. Vuex and Redux are very similar.

Both have the same purpose, but Vuex is a little easier to understand. Let's name the main Redux file.

./src/store.js

import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import rootReducer from "./reducers";

const initialState = {};

const middleware = [thunk];

const store = createStore(
  rootReducer,
  initialState,
  applyMiddleware(...middleware)
);

export default store;

Make it super clean. The code is self-explaining. Clean boilerplate for bigger projects.

In ./src/App.tsx it's time to make some changes.

./src/App.tsx

import React from "react";
import { Provider } from "react-redux";
import store from "./store";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

import Home from "./pages/Home";

function App() {
  return (
    <Provider store={store}>
      <Router>
        <Switch>
          <Route path="/" component={Home} />
        </Switch>
      </Router>
    </Provider>
  );
}

export default App;

To make React application work with Redux, we need to wrap the app in , which receives ./src/store.js. It's possible to have multiple stores. Saw it before, but not a big fan //yet 🤣.

You saw a couple of errors in your terminal if you saved your code, I'm sure. It's time to make a first page - Home.

Step 7

Naming assets

For background of cards on home page, I use gifs, so here are names (put whatever gifs you like):

./src/assets/clear.gif

./src/assets/clouds.gif

./src/assets/drizzle.gif

./src/assets/fog.gif

./src/assets/rain.gif

./src/assets/snow.gif

./src/assets/thunderstorm.gif

For Home page eight pictures are used. Four for phones, four for desktops.

For phones:

./src/assets/p_bg1.jpg

...

./src/assets/p_bg4.jpg

For desktops:

./src/assets/d_bg1.jpg

...

./src/assets/d_bg4.jpg

Step 8

Home and its components

./src/pages/Home.tsx

import React, { Component } from "react";

import Card from "../components/home/Card";
import { connect } from "react-redux";
import { fetchWeather } from "../actions/ajaxActions";

interface FormProps {
  fetchWeather: Function;
  weather: Record<string, any>;
}

interface FormState {
  random: number;
  imageSource: string;
}

class Home extends Component<FormProps, FormState> {
  constructor(props: any) {
    super(props);

    const randomInt = (min: number, max: number) =>
      Math.floor(Math.random() * (max - min)) + min; // generate random integer

    this.state = {
      random: randomInt(1, 5), // randomly select background, whose names ends with 1 | 2 | 3 | 4
      imageSource: "",
    };
  }

  // select randomly/change background on click
  setBg = (type: "default" | "click"): void => {
    if (type === "default") {
      this.setState({
        imageSource: require(`../assets/${
          window.innerWidth < 768 ? "p" : "d"
        }_bg${this.state.random}.jpg`),
      });
    } else if (type === "click") {
      // increase random num, then call recursive callback
      if (this.state.random === 4) {
        return this.setState(
          {
            random: 1,
          },
          () => this.setBg("default")
        );
      }

      return this.setState(
        {
          random: this.state.random + 1,
        },
        () => this.setBg("default")
      );
    }
  };

  componentDidMount() {
    this.props.fetchWeather();
    this.setBg("default");
    window.addEventListener("resize", () => this.setBg("default"));
  }

  render() {
    return (
      <div
        className="h-screen w-screen bg-cover bg-center"
        style={{
          backgroundImage: `url(${this.state.imageSource})`,
        }}
        onClick={() => this.setBg("click")}
      >
        <div
          className="flex flex-col justify-center items-center w-screen"
          style={{ height: "95%" }}
        >
          {Object.keys(this.props.weather).map((e, i) => {
            return <Card city={e} key={i} weather={this.props.weather[e]} />;
          })}
        </div>
      </div>
    );
  }
}

const mstp = (state: { weatherReducer: { weather: {} } }) => ({
  weather: state.weatherReducer.weather,
});

export default connect(mstp, { fetchWeather })(Home);

Take advantage of Typescript, by predefining types of component props and state.

Define the component as a class component. The same thing can be done with React Hooks.

The thing to remember at expression setBg is that setState won't immediately set state, so take advantage of its second argument. It receives callback which will execute immediately after the state is updated. And then its time for the recursive call, to change background photo.

The single argument of an arrow function you could write without parentheses. For clarity purposes, let's keep 'em

./src/components/home/Card.tsx

Name your components with a capital letter!

import LeftComponent from "./LeftComponent";
import { Link } from "react-router-dom";
import React from "react";
import { RiMapPinLine } from "react-icons/ri";
import RightComponent from "./RightComponent";
import Tomorrow from "./Tomorrow";
import { determineGif } from "../Utils";

interface FormProps {
  city: string;
  weather: any;
}

function Card(props: FormProps) {
  // find min. and max. temperatures from all timestamps from today
  const findMinAndMaxTemps = (list: any[]): [number, number] => {
    const d = new Date();

    const today = d.getDate() < 10 ? `0${d.getDate()}` : d.getDate();
    let min: number[] = [],
      max: number[] = [];

    list.forEach((e) => {
      if (`${e.dt_txt[8]}${e.dt_txt[9]}` === today.toString()) {
        min.push(e.main.temp_min);
        max.push(e.main.temp_max);
      }
    });

    return [
      Math.round(Math.min(...min) - 273.15),
      Math.round(Math.max(...max) - 273.15),
    ];
  };

  let temperature = 0,
    minTemperature = 0,
    maxTemperature = 0,
    stateOfWeather = "",
    feelsLike = 0,
    speed = 0,
    deg = 0,
    idOfWeather = 0,
    day = true,
    list = [];

  if (props.weather?.list) {
    temperature = Math.round(props.weather.list[0].main.temp - 273.15);
    [minTemperature, maxTemperature] = findMinAndMaxTemps(props.weather.list);
    stateOfWeather = props.weather.list[0].weather[0].main;
    feelsLike = Math.round(props.weather.list[0].main.temp - 273.15);
    speed = props.weather.list[0].wind.speed;
    deg = props.weather.list[0].wind.deg;
    idOfWeather = props.weather.list[0].weather[0].id;
    day = props.weather.list[0].sys.pod === "d";
    list = props.weather.list;
  }

  const [classes, url] = determineGif(idOfWeather);

  return (
    <Link to={`/${props.city}`} className="h-40 w-full sm:w-410px">
      <div className="flex h-40 w-full sm:w-410px">
        <div
          className={`text-white m-2 rounded-lg flex-grow bg-left-bottom ${classes}`}
          style={{
            backgroundImage: `url(${url})`,
          }}
        >
          <div className="flex w-full h-full divide-x divide-gray-400 ">
            <div className="w-9/12">
              <div
                className="mt-2 ml-2 p-2 rounded-lg inline-block text-xs"
                style={{
                  boxShadow: "0 0 15px 1px rgba(0, 0, 0, 0.75)",
                  backdropFilter: "blur(2px)",
                }}
              >
                <div className="flex items-center">
                  <RiMapPinLine />
                  <div className="ml-2">{props.city}</div>
                </div>
              </div>
              <div className="w-full flex justify-around items-center">
                <LeftComponent
                  stateOfWeather={stateOfWeather}
                  idOfWeather={idOfWeather}
                  day={day}
                />
                <div className="flex flex-col text-center">
                  <div className="text-5xl">{temperature}°</div>
                  <div className="text-lg">
                    {minTemperature}/{maxTemperature}°
                  </div>
                </div>
                <RightComponent speed={speed} deg={deg} feelsLike={feelsLike} />
              </div>
            </div>
            <Tomorrow idOfWeather={idOfWeather} day={day} list={list} />
          </div>
        </div>
      </div>
    </Link>
  );
}

export default Card;

If you are curious about determineGif, continue reading, we are almost there!

Take a look at an API response structure, so you can understand variable pairing.

The API response is in Kelvin, so to get Celsius you need to subtract 273.15.

You could do the same thing by passing units=metric at request URL, but its great to meet Javascript floating point number precision.

Remove Math.round() and time will tell you about it 🤣.

As you can see, we get into Tailwind. Tailwind is nice, I would say 'micro' CSS framework, that almost doesn't let you write raw CSS. I don't like it like I do Vuetify, but if you need to manage style at a low and small level, it's great! The thing that I most like about it, it's great documentation.

This component could be separated into smaller parts. But to be time-friendly, I kept it relatively "big".

There are 3 more components, so let's explore 🧐.

./src/components/home/LeftComponent.tsx

import React from "react";
import { determineIcon } from "../Utils";

interface FormProps {
  stateOfWeather: string;
  idOfWeather: number;
  day: boolean;
}

function LeftComponent(props: FormProps) {
  return (
    <div className="flex flex-col text-center">
      {determineIcon(props.idOfWeather, props.day, "h-16 w-16")}
      <div>{props.stateOfWeather}</div>
    </div>
  );
}

export default LeftComponent;

./src/components/home/RightComponent.tsx

import React from "react";

interface FormProps {
  feelsLike: number;
  deg: number;
  speed: number;
}

function RightComponent(props: FormProps) {
  const determineLevel = (temp: number): string[] => {
    if (temp < 10 || temp > 29) {
      return ["Bad", "bg-red-600"];
    }

    if ((temp > 9 && temp < 18) || (temp > 22 && temp < 30)) {
      return ["ok", "bg-yellow-600"];
    }

    if (temp > 17 && temp < 23) {
      return ["Good", "bg-green-600"];
    }

    return [];
  };

  const determineSide = (deg: number): string | undefined => {
    if (deg < 30) return "N";

    if (deg < 60) return "NE";

    if (deg < 120) return "E";

    if (deg < 150) return "ES";

    if (deg < 210) return "S";

    if (deg < 240) return "SW";

    if (deg < 300) return "W";

    if (deg < 330) return "NW";

    if (deg < 360) return "N";
  };

  const feelsLikeProperties = determineLevel(props.feelsLike);

  return (
    <div className="self-end text-center">
      <div
        className={`${feelsLikeProperties[1]} rounded-lg text-xs sm:text-sm p-1`}
      >
        {props.feelsLike} {feelsLikeProperties[0]}
      </div>
      <div className="mt-1 text-xs md:text-sm">
        {determineSide(props.deg)} {Math.round(props.speed * 3.6)} km/h
      </div>
    </div>
  );
}

export default RightComponent;

determineLevel return could be better, but let's keep it simple.

Wind response is in m/s, so to convert it to km/h multiply by 3.6.

determineSide is there for determining if its north, east...

I have a challenge for you - after you make this application, try to make a feature to toggle wind speed between m/s, km/h, and km/s.

./src/components/home/Tomorrow.tsx

import React from "react";
import { RiArrowRightSLine } from "react-icons/ri";
import { determineIcon } from "../Utils";

interface FormProps {
  idOfWeather: number;
  day: boolean;
  list: [];
}

function Tomorrow(props: FormProps) {
  const determineNextDayAbb = (): string => {
    const weekdays = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];

    let date = new Date();
    let index: number;

    if (date.getDay() === 6) {
      index = 0;
    } else {
      index = date.getDay() + 1;
    }

    return weekdays[index];
  };

  const crawlNextDayTemps = (list: any[]): [number, number] | void => {
    const d = new Date();
    d.setDate(d.getDate() + 1); // tomorrow

    const tomorrow = d.getDate() < 10 ? `0${d.getDate()}` : d.getDate();

    let min: number[] = [],
      max: number[] = [];

    list.forEach((e) => {
      if (`${e["dt_txt"][8]}${e["dt_txt"][9]}` === tomorrow.toString()) {
        min.push(e.main.temp_min);
        max.push(e.main.temp_max);
      }
    });

    return [
      Math.round(Math.min(...min) - 273.15),
      Math.round(Math.max(...max) - 273.15),
    ];
  };

  const nextDayTemps = crawlNextDayTemps(props.list);

  return (
    <div className="w-3/12">
      <div className="flex justify-between p-2">
        <div className="text-xs">{determineNextDayAbb()}</div>
        <div className="text-xs flex items-center">
          <div>More</div>
          <RiArrowRightSLine />
        </div>
      </div>
      <div className="flex flex-col text-center">
        <div className="w-full">
          {determineIcon(props.idOfWeather, props.day, "h-16 w-16 mx-auto")}
        </div>
        <div className="text-lg">
          {Array.isArray(nextDayTemps) ? nextDayTemps[0] : "?"}/
          {Array.isArray(nextDayTemps) ? nextDayTemps[1] : "?"}°
        </div>
      </div>
    </div>
  );
}

export default Tomorrow;

Expression names are self-explaining. The classical example of a functional component.

Step 9

City and its components

It's a pretty long article. A lot longer than I expected to 😅.
Let's first add the city route to React.

./src/App.tsx

Before

<Route path="/" component={Home} />

add:

<Route path="/:city" component={City} />

Add the "City" route before the "Home" route, or take advantage of exact prop.

At the top of ./src/App.tsx add:

import City from "./pages/City";

./src/pages/City.tsx

import React, { Component } from "react";

import Desktop from "../components/city/Desktop";
import { connect } from "react-redux";
import { fetchWeather } from "../actions/ajaxActions";

// match.params.city is URL (react-router) variable
interface FormProps {
  fetchWeather: Function;
  match: {
    params: {
      city: string;
    };
  };
  weather: Record<string, any>;
}

interface FormState {
  imageSrc: string;
  random: number;
}

class City extends Component<FormProps, FormState> {
  constructor(props: any) {
    super(props);

    if (
      this.props.match.params.city !== "Munich" &&
      this.props.match.params.city !== "London" &&
      this.props.match.params.city !== "California"
    ) {
      window.location.replace("/404");
      return;
    }

    if (!Object.keys(this.props.weather).length) {
      // fetch from api, if city is accessed directly
      this.props.fetchWeather();
    }

    const randomInt = (min: number, max: number) =>
      Math.floor(Math.random() * (max - min)) + min;

    this.state = {
      imageSrc: "",
      random: randomInt(1, 3), // choose random photo from 2 available photos
    };
  }

  updateDimensions = () => {
    // change background photo for phone/desktop
    this.setState({
      imageSrc: require(`../assets/${
        window.innerWidth < 768 ? "p" : "d"
      }_${this.props.match.params.city.toLowerCase()}${this.state.random}.jpg`),
    });
  };

  componentDidMount() {
    this.updateDimensions();
    window.addEventListener("resize", this.updateDimensions);
  }

  render() {
    return (
      <div
        className="h-screen w-screen bg-cover bg-center"
        style={{
          backgroundImage: `url(${this.state.imageSrc})`,
        }}
      >
        <Desktop
          city={this.props.match.params.city}
          info={this.props.weather[this.props.match.params.city]}
        />
      </div>
    );
  }
}

const mstp = (state: { weatherReducer: { weather: {} } }) => ({
  weather: state.weatherReducer.weather,
});

export default connect(mstp, { fetchWeather })(City);

As you can see, if the URL is not these 3 cities, we redirect the user to the 404 pages. Challenge here for you is to make a good-looking 404 page.

The same pattern for changing background photo is used here.

In case the user enters URL directly, the application fetches data from API if there's no data in the state.

Here is the elephant of the code 😅

./src/components/city/Desktop.tsx

import React, { useState } from "react";
import { WiHumidity, WiStrongWind } from "react-icons/wi";

import { GiCrossedAirFlows } from "react-icons/gi";
import { MdVisibility } from "react-icons/md";
import { determineIcon } from "../Utils";

interface FormProps {
  city: string;
  info: any;
}

function Desktop(props: FormProps) {
  const [day, setDay] = useState(0);
  const [hour, setHour] = useState(0);

  const blurredChip = {
    boxShadow: "0 3px 5px rgba(0, 0, 0, 0.3)",
    backdropFilter: "blur(2px)",
  };

  const determineNext5Days = (): string[] => {
    const days = [
      "Sunday",
      "Monday",
      "Tuesday",
      "Wednesday",
      "Thursday",
      "Friday",
      "Saturday",
    ];

    let next5Days = [];

    for (let i = 0; i < 4; i++) {
      const d = new Date();
      d.setDate(d.getDate() + i);

      next5Days.push(days[d.getDay()]);
    }

    return next5Days;
  };

  interface Simplified {
    time: string;
    temp: number;
    feelsLike: number;
    weatherID: number;
    weatherState: string;
    day: boolean;
    humidity: number;
    pressure: number;
    windSpeed: number;
    visibility: number;
  }

  // pluck relevant info of todays timestamps
  const determineTimestamps = (day: number, list: any[]): any[] => {
    const d = new Date();
    d.setDate(d.getDate() + day);

    const timestamps: Simplified[] = [];

    for (const e of list) {
      if (parseInt(`${e["dt_txt"][8]}${e["dt_txt"][9]}`) === d.getDate()) {
        timestamps.push({
          time: e.dt_txt.slice(11, 16),
          temp: Math.round(e.main.temp - 273.15),
          feelsLike: Math.round(e.main.feels_like - 273.15),
          weatherID: e.weather[0].id,
          weatherState: e.weather[0].main,
          day: e.sys.pod === "d",
          humidity: e.main.humidity,
          pressure: e.main.pressure,
          windSpeed: Math.round(e.wind.speed * 3.6),
          visibility: Math.round(e.visibility / 100),
        });
      }
    }

    return timestamps;
  };

  // rather return the last timestamps than earlier ones (e.g. 21:00 > 03:00)
  const checkTerrain = (squares: number, tss: Simplified[]) => {
    let cut: any[] = [];

    const numberOfNeededRemoval = tss.length - squares;

    if (numberOfNeededRemoval < 0) return tss;

    for (let i = numberOfNeededRemoval; i < tss.length; i++) {
      cut.push(tss[i]);
    }

    return cut;
  };

  const adaptToWidth = (tss: Simplified[]) => {
    // show minimum four squares of timestamps to max 8
    if (tss.length < 5) return tss;

    if (window.innerWidth < 950) {
      return checkTerrain(4, tss);
    } else if (window.innerWidth < 1150) {
      return checkTerrain(5, tss);
    } else if (window.innerWidth < 1250) {
      return checkTerrain(6, tss);
    } else if (window.innerWidth < 1350) {
      return checkTerrain(7, tss);
    }

    return checkTerrain(8, tss);
  };

  // until info from api is fetched
  const timestamps = props.info?.list
    ? adaptToWidth(determineTimestamps(day, props.info?.list))
    : [];

  if (!timestamps.length) {
    return <></>;
  }

  // after fetch
  return (
    <>
      <div className="w-screen flex justify-between" style={{ height: "65%" }}>
        <div className="text-white pt-8 pl-8">
          <div className="text-6xl">
            {determineIcon(timestamps[hour].weatherID, timestamps[hour].day)}
          </div>
          <div className="text-4xl my-1 sm:my-0">
            {timestamps[hour].weatherState}
          </div>
          <div className="text-xl my-1 sm:my-0">{props.city}</div>
          <div className="text-5xl font-bold">{timestamps[hour].temp}°C</div>
        </div>
        <div className="mt-20 mr-4 md:mr-20">
          <div className="flex">
            <div className="text-gray-200 pr-1">
              <WiHumidity className="text-3xl" />
            </div>
            <div>
              <div className="text-gray-200 text-sm sm:base">Humidity</div>
              <div className="text-white text-2xl sm:text-3xl font-bold">
                {timestamps[hour].humidity}%
              </div>
            </div>
          </div>

          <div className="flex my-4">
            <div className="text-gray-200 pr-1">
              <GiCrossedAirFlows className="text-2xl" />
            </div>
            <div>
              <div className="text-gray-200 text-sm sm:base">Air Pressure</div>
              <div className="text-white text-2xl sm:text-3xl font-bold">
                {timestamps[hour].pressure} hPa
              </div>
            </div>
          </div>

          <div className="flex my-4">
            <div className="text-gray-200 pr-1">
              <WiStrongWind className="text-2xl" />
            </div>
            <div>
              <div className="text-gray-200 text-sm sm:base">Wind speed</div>
              <div className="text-white text-2xl sm:text-3xl font-bold">
                {timestamps[hour].windSpeed} km/h
              </div>
            </div>
          </div>

          <div className="flex my-4">
            <div className="text-gray-200 pr-1">
              <MdVisibility className="text-2xl" />
            </div>
            <div>
              <div className="text-gray-200 text-sm sm:base">Visibility</div>
              <div className="text-white text-2xl sm:text-3xl font-bold">
                {timestamps[hour].visibility}%
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="w-screen text-white" style={{ height: "35%" }}>
        <div className="flex items-center pl-2 sm:pl-8">
          {determineNext5Days().map((e, i) => {
            return (
              <div
                className="px-2 py-1 mx-2 lg:mb-2 rounded-lg cursor-pointer"
                style={day === i ? blurredChip : {}}
                onClick={() => {
                  setHour(0);
                  setDay(i);
                }}
                key={i}
              >
                {e}
              </div>
            );
          })}
        </div>

        <div className="flex justify-around px-8 pt-6 sm:pt-5">
          {timestamps.map((e: any, index: number) => {
            return (
              <div
                key={index}
                className="h-40 w-40 flex flex-col cursor-pointer"
                style={{
                  boxShadow: "0 0 15px 1px rgba(0, 0, 0, 0.75)",
                  backdropFilter: "blur(2px)",
                  transform: hour === index ? "scale(1.1)" : "",
                  zIndex: hour === index ? 2 : 1,
                }}
                onClick={() => setHour(index)}
              >
                <div className="pt-2 pl-2">{e.time}</div>
                <div className="flex-grow"></div>
                <div className="pl-1 sm:pl-2 pb-1 sm:pb-2">
                  <div className="text-2xl font-bold">{e.temp}°C</div>
                  {hour === index ? (
                    <div className="text-xs sm:text-base">
                      Feels like {e.feelsLike}°
                    </div>
                  ) : null}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </>
  );
}

export default Desktop;

Challenge for you can be to separate this huge chunk of code into smaller components.

Welcome to React Hook. The hooks are amazing. I was wondering why the dev community makes all this drama about hooks. I didn't know anything about React back then. But after learning, I realised that it's a nice developer experience.

Here is the power of Javascript - callbacks.

Challenge for you could be to show the time of these cities. They are not in the same timezone, so its gonna be interesting.

Life without high-order functions would be painful.

Step 10

Utils.tsx

There is a lot of functionality that needs to be shared between components. Don't clutter code with duplications.

The functionality that we will adapt according to API is changing icons and gifs.

It's hardcoded. If the project was real-life, it will be through RegEx and loops. But for this purpose, the switch will do the job.

To not clutter already long post, here is the code of Utils.tsx. Path: ./src/components/Utils.tsx

Step 11

Prepare for production

./postcss.config.js

const purgecss = require("@fullhuman/postcss-purgecss")({
  content: [
    "./src/**/*.html",
    "./src/**/*.ts",
    "./src/**/*.tsx",
    "./public/index.html",
  ],

  defaultExtractor: (content) => {
    const broadMatches = content.match(/[^<>"'`\s]*[^<>"'`\s:]/g) || [];

    const innerMatches = content.match(/[^<>"'`\s.()]*[^<>"'`\s.():]/g) || [];

    return broadMatches.concat(innerMatches);
  },
});

const cssnano = require("cssnano");

module.exports = {
  plugins: [
    require("tailwindcss"),
    require("autoprefixer"),
    cssnano({
      preset: "default",
    }),
    purgecss,
  ],
};

./package.json

"build:tailwind": "tailwind build src/tailwind.css -o src/tailwind.output.css"

change to

"build:tailwind": "postcss src/tailwind.css -o src/tailwind.output.css"

Run npm run build and you will get rid of the unused Tailwind classes and end up with ~3kb CSS file.

There's an option for passing ENV argument into npm build and minimizing CSS only for production, but let's keep it simple here.

You may serve production build with the static server. You should receive a manual in the terminal after npm run build.

Voila!

Backstory

Why I built this application?

To get a taste of React, Redux, Typescript, and Tailwind. I've learned those in 3 days.

Why Redux in the ultra-small application?

To find out why the whole Internet complains about Redux... but it's not that scary!

Why bother posting it?

Someone is gonna find it useful. More content - better.

Can't wait to learn more about these web technologies. 🧐

The end

I hope you learned something from my first post. I thought that post would be much shorter. Even in a simple application is hard to cover all parts.

Thank you for reading. I hope I helped you. A well thought out critique is welcome.

DEV Community: Kenan Sejmenović

Developing 1st game ever: 9 lessons learned (race game, Unity)

First, let me show you a trailer of the game. Don't worry, it's only 1:24 minutes long.

Want to play?

Contents:

Disclaimer

Introduction

Technologies used

Coming from the web developer world

A word about game engines and Unity

Challenges (mostly in math)

A few words about the deadline

What went good

Recognized mistakes made

9 learned lessons

Looking at the game a few months later

A word about the beautiful tool - Git

Final word

15 Parts of How I Built Food Delivery App, Lessons & Ideas through Laravel and Vue

Introduction

Overview

Technical overview

Database plan

Order process

Order process visualisation

History overview

Queues

Cron jobs overview

Security

Validations and notifications

Data duplication in the database

Deactivation

Business model

Story

Looking for the portfolio inspiration and code? Maybe Vue? 🤫

Weather app in React, Redux, Typescript, and Tailwind

Let's start

Step 1

Install packages

Step 2

Remove auto-generated code

Step 3

Building structure

Step 4

Enable Tailwind

Step 5

Prepare Redux

Step 6

Connect app to redux

Step 7

Naming assets

Step 8

Home and its components

Step 9

City and its components

Step 10

Utils.tsx

Step 11

Prepare for production

Backstory

The end