Feature/first frontend

.github/linters/.htmlhintrc

@@ -10,7 +10,7 @@
   "spec-char-escape": true,
   "id-unique": false,
   "src-not-empty": true,
-  "title-require": true,
+  "title-require": false,
   "alt-require": true,
   "doctype-html5": true,
   "id-class-value": false,

Dockerfile

@@ -1,8 +1,7 @@
 # -----------------------------------------------------------------
-# Dockerfile for building the client
+# Dockerfile for building the blobfishes project
 # -----------------------------------------------------------------
-#
-FROM node:12.18-alpine
+FROM node:14.17.3-alpine
 #
 # -----------------------------------------------------------------
 # Default template for running Node.js apps in production mode

README.md

@@ -30,6 +30,12 @@ docker-compose up --build --force-recreate
 
 ### Local client development
 
+Prerequisites:
+
+* [Node.js](https://nodejs.org/) version 14.17.3 or later
+
+Run the following command from a shell:
+
 ```bash
 cd client
 npm install

client/.eslintrc.cjs

@@ -0,0 +1,15 @@
+module.exports = {
+	root: true,
+	extends: ['eslint:recommended'],
+	plugins: ['svelte3'],
+	overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
+	parserOptions: {
+		sourceType: 'module',
+		ecmaVersion: 2019
+	},
+	env: {
+		browser: true,
+		es2017: true,
+		node: true
+	}
+};

client/.gitignore

@@ -1,4 +1,5 @@
-/node_modules/
-/public/build/
-
 .DS_Store
+node_modules
+/.svelte-kit
+/package
+/build

client/.npmrc

@@ -0,0 +1 @@
+engine-strict=true

client/Dockerfile

@@ -1,8 +1,8 @@
 # -----------------------------------------------------------------
 # Dockerfile for building the client
 # -----------------------------------------------------------------
+FROM node:14.17.3-alpine
 #
-FROM node:12.18-alpine
 # ENV NODE_ENV=production
 WORKDIR /usr/src/app
 COPY ["package.json", "package-lock.json*", "npm-shrinkwrap.json*", "./"]

client/README-svelte.md

@@ -0,0 +1,38 @@
+# create-svelte
+
+Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte);
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npm init svelte@next
+
+# create a new project in my-app
+npm init svelte@next my-app
+```
+
+> Note: the `@next` is temporary
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+Before creating a production version of your app, install an [adapter](https://kit.svelte.dev/docs#adapters) for your target environment. Then:
+
+```bash
+npm run build
+```
+
+> You can preview the built app with `npm run preview`, regardless of whether you installed an adapter. This should _not_ be used to serve your app in production.

client/README.md

@@ -1,105 +1,101 @@
-*Looking for a shareable component template? Go here --> [sveltejs/component-template](https://github.com/sveltejs/component-template)*
+## blobfish frontend
 
----
-
-# svelte app
+This is frontend is created using [Svelte Kit](https://kit.svelte.dev/)
 
-This is a project template for [Svelte](https://svelte.dev) apps. It lives at https://github.com/sveltejs/template.
+---
 
-To create a new project based on this template using [degit](https://github.com/Rich-Harris/degit):
+# Note about the development of this project
 
-```bash
-npx degit sveltejs/template svelte-app
-cd svelte-app
-```
+In next paragraphs some of my personals annotation taken during the development process.I found these annotations will be very usefull for next developments.
 
-*Note that you will need to have [Node.js](https://nodejs.org) installed.*
+## Tailwind CSS
 
+In this project I used the Tailwind CSS (https://tailwindcss.com/) framework.
 
-## Get started
+__Installation__
 
-Install the dependencies...
+You need to install following dev dependences:
+- tailwindcss
+- postcss
+- postcss-load-config
+- cssnano
+- svelte-preprocess
+- autoprefixer
 
-```bash
-cd svelte-app
-npm install
 ```
-
-...then start [Rollup](https://rollupjs.org):
-
-```bash
-npm run dev
+npm install tailwindcss postcss postcss-load-config cssnano svelte-preprocess autoprefixer --save-dev
 ```
 
-Navigate to [localhost:5000](http://localhost:5000). You should see your app running. Edit a component file in `src`, save it, and reload the page to see your changes.
-
-By default, the server will only respond to requests from localhost. To allow connections from other computers, edit the `sirv` commands in package.json to include the option `--host 0.0.0.0`.
+__Create tailwind.config.cjs__
 
-If you're using [Visual Studio Code](https://code.visualstudio.com/) we recommend installing the official extension [Svelte for VS Code](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode). If you are using other editors you may need to install a plugin in order to get syntax highlighting and intellisense.
-
-## Building and running in production mode
-
-To create an optimised version of the app:
-
-```bash
-npm run build
+To create this configuration file use the following command:
 ```
-
-You can run the newly built app with `npm run start`. This uses [sirv](https://github.com/lukeed/sirv), which is included in your package.json's `dependencies` so that the app will work when you deploy to platforms like [Heroku](https://heroku.com).
-
-
-## Single-page app mode
-
-By default, sirv will only respond to requests that match files in `public`. This is to maximise compatibility with static fileservers, allowing you to deploy your app anywhere.
-
-If you're building a single-page app (SPA) with multiple routes, sirv needs to be able to respond to requests for *any* path. You can make it so by editing the `"start"` command in package.json:
-
-```js
-"start": "sirv public --single"
+npx tailwindcss init tailwind.config.cjs
 ```
+this create a default Tailwind configuration file.
 
-## Using TypeScript
-
-This template comes with a script to set up a TypeScript development environment, you can run it immediately after cloning the template with:
-
-```bash
-node scripts/setupTypeScript.js
-```
+__Configure the preprocessor__
 
-Or remove the script via:
+Configure the preprocessor by modifying the `svelte.config.js` file, located in the project root, to use `postcss` processing.
 
-```bash
-rm scripts/setupTypeScript.js
+```js
+import preprocess from 'svelte-preprocess';
+...
+const config = {
+  	preprocess: [
+		preprocess({
+			postcss: true
+		}),
+	],
+  ...
+}
+
+export default config;
 ```
 
-## Deploying to the web
-
-### With [Vercel](https://vercel.com)
+__Create the PostCss configuration file__
 
-Install `vercel` if you haven't already:
+Create the file `postcss.config.cjs`
 
-```bash
-npm install -g vercel
+```js
+const tailwindcss = require("tailwindcss");
+const autoprefixer = require("autoprefixer");
+const cssnano = require("cssnano");
+
+const mode = process.env.NODE_ENV;
+const dev = mode === "development";
+
+module.exports = {
+	plugins: [
+		// Some plugins, like postcss-nested, need to run before Tailwind
+		tailwindcss,
+		// But others, like autoprefixer, need to run after
+		autoprefixer,
+
+		!dev && cssnano({
+			preset: "default",
+		}),
+	],
+};
 ```
+__Include Tailwind in your CSS__
 
-Then, from within your project folder:
+You need to include in a way of your choise this part of code in the main css file
 
-```bash
-cd public
-vercel deploy --name my-project
+```css
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
 ```
 
-### With [surge](https://surge.sh/)
+In this project I created a `tailwind.css` file in the root od src folder with above code.
 
-Install `surge` if you haven't already:
+Then I included this file in the \<script\> of the `__layout.svelte` file.
 
-```bash
-npm install -g surge
+```html
+<script>
+  import '../tailwind.css';
+</script>
 ```
 
-Then, from within your project folder:
-
-```bash
-npm run build
-surge public my-project.surge.sh
-```
+EOF

client/jsconfig.json

@@ -0,0 +1,10 @@
+{
+	"compilerOptions": {
+		"baseUrl": ".",
+		"paths": {
+			"$lib": ["src/lib"],
+			"$lib/*": ["src/lib/*"]
+		}
+	},
+	"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
+}