michalusio / kunekune Goto Github PK

It should look as follow:

mobile version is a bit different:

helpful css' concepts:

https://www.w3schools.com/css/css3_object-fit.asp
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

We want to create a React solution in the Frontend folder.

Specifically, the structure should look like:

Frontend

package.json
package-lock.json
...other files

To do so, first you have to install Node.js. You can google for it yourself, or use this link:

https://nodejs.org/en/download

After installing it, your console should have access to the npm tool. It's the package manager for managing creation of new JS projects, as well as managing the libraries used by those projects.

Using the command line, go to the Frontend folder and create a new project.
There are many ways of creating a JS project.
We will be using the Vite bundler with TypeScript (compiled using SWC) and React, so the command to create the project will look like this:
npm create vite@latest frontend -- --template react-swc-ts

And... if that doesn't error, it should create the whole project for us 😄

After creating the solution, do not forget to commit the changes and create a PR to the master branch.

We want to create a Visual Studio solution in the Backend folder.

Specifically, the structure should look like:

Backend

Backend.sln
...other files

To do so, first create and checkout a new branch (you can call it something like "backend-setup" or however you like).
Then, you want to open Visual Studio, select "Create a new project", and go through the whole process.
You should select:

• "ASP.NET Core Web API" as the type of the project
• the Backend folder as the root of the solution
• .NET 8.0 as the framework
• No authentication
• No HTTPS support
• Enable Docker (Linux as the OS)
• Enable OpenAPI support
• Top-level statements doesn't matter, we can go either
• Use controllers

After creating the solution, do not forget to commit the changes and create a PR to the master branch.

1. Install Git. It's the tool for managing code we create. It allows us to synchronize our changes with others, and make pull requests, so others can review our code before merging it into the main codebase
2. Go to a folder where you have your projects and download this repository. Downloading can be done using a GUI of some kind, or you can just use the command line:
   git clone https://github.com/michalusio/KuneKune

We want our website to look nice, so we have to add a nice font to it.
The usual choice is something like Lato, although you can select a different font if something catches your eye.

As said on the Google page, you need to add a few HTML tags to the tag, which is located in Frontend/index.html

An explanation of the tags:

• <link rel="preconnect" href=X> - this tag tells the browser to immediately create a connection to the given url. It increases the download performance, as when the browser gets down to parsing the line containing a file download, the connection is already established.
• <link rel="stylesheet" href=X> - this tag tells the browser that it should load a file specified by a given url, and treat it as a stylesheet (i.e. a CSS file). That is the primary way of loading style files for your site.

Docker is a tool for managing such containers.
You can download Docker Desktop (which is the GUI) here

Overall, we will be using Docker to run the database locally, so we can store e.g. articles and other stuff in it, and serve it from the backend to the frontend.

We should have at least 2 components there:

1. header
2. banner

Please use modular styles and keep in mind, that some elements will be reused (eg. button), so you can choose to either create a component for the button, or use globally available styles for it (the first option is better). The picture will be stored in assets, on React side.

Please use scss for styling, as it is much more convenient to use than plain css.
To enable it, install the sass package using npm install -D sass.
To create a modular style, the extension should be .module.scss.
Then you can import the style in the component by writing import styles from <filepath>;

We want our styles to have common colors and breakpoints available everywhere, so when we want to change some of them we won't have to go through the entire project.

To achieve that, create a _variables.scss file in the src/Styles folder (create it if needed), and put the variables there.

We want to have variables for each of the colors we will use in the design (your call!), as well as variables for the design breakpoints.

Common breakpoints:

• xl: 1200px
• lg: 992px
• md: 768px
• sm: 520px