Merge pull request #10 from christianjtr/develop

Merge to master readme file and assets

README.md

@@ -1,16 +1,67 @@
-# Svelte + Vite
+# My Pokédex PWA application
+
+Proof of concept aimed at putting into practice Svelte as a technology.
+
+> [!NOTE]  
+> ❤️ Feel free to add any improvements or suggestions you consider.
+
+1. [Goals](#001)
+2. [Tech Stack](#002)
+3. [Tech specs](#003)
+4. [Installation and running the project](#004)
+5. [Samples](#005)
+6. [Next steps](#006)
+
+<a name="001"></a>
+### 🎯 Goals
+
+-   Create an application **(PWA)** that displays Pokémons and its stats.
+-   Integrate the **[The Pokémon API - PokéAPI](https://pokeapi.co/)** to the application.
+- Use of **Plotly charts** to display stats.
+-   Add the capability of listening to the Pokémon description using the **SpeechSynthesis API**.
+-   Use browser's **LocalStorage** as a mean of data persistance.
+
+#### Features
+- Being able of installing the application on mobile devices / browser devices. **(PWA support)**.
+- Get paginated resources by setting a **limit and an offset** criteria.
+- Persist data by storing responses in browsers's LocalStorage. **Default time to live (TTL): 5 days.**
+- Look for resources given an identifier (Pokémons given a name).
+- Display stats using a **scatter polar chart**.
+- Listen to the Pokémon's description by using the **SpeechSynthesis API**.
+
+<a name="002"></a>
+### Tech Stack
+
+-   **Front-end**
+    -   [Svelte](https://svelte.dev/)
+    -   [Vite](https://vitejs.dev/)
+    -   [SvelteKit Vite PWA](https://vite-pwa-org.netlify.app/)
+    -   [Bulma CSS](https://bulma.io/)
+-   **Charts**
+    -   [Plotly JavaScript Open Source Graphing Library
+](https://plotly.com/javascript/)
+-   **Web APIs**
+    -   [LocalStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage)
+    -   [SpeechSynthesis](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis)
+
+<a name="003"></a>
+### Tech specs
+
+> From Sveltve+Vite default template
+
+#### Svelte + Vite
 
 This template should help get you started developing with Svelte in Vite.
 
-## Recommended IDE Setup
+#### Recommended IDE Setup
 
 [VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
 
-## Need an official Svelte framework?
+#### Need an official Svelte framework?
 
 Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less, and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more.
 
-## Technical considerations
+#### Technical considerations
 
 **Why use this over SvelteKit?**
 
@@ -45,3 +96,56 @@ If you have state that's important to retain within a component, consider creati
 import { writable } from 'svelte/store'
 export default writable(0)
 ```
+
+<a name="004"></a>
+### Installation and running the project
+
+The project requires:
+
+-   [NodeJS](https://nodejs.org/)
+
+**Clone the repository:**
+
+```shell
+git clone https://github.com/christianjtr/svelte-pokedex-pwa.git
+```
+
+**Scripts:**
+
+Before executing these scripts, you must run **npm install** in the directory you just downloaded/cloned the codebase.
+
+```shell
+# Development mode
+> npm run dev
+
+# Build mode
+> npm run build
+
+# Others, refer to package.json file
+# ...
+```
+
+
+<a name="005"></a>
+### Samples
+
+##### Live demo
+
+Click on the following link [GitHub page project](https://christianjtr.github.io/svelte-pokedex-pwa). 
+
+##### Preview
+
+
+<p align="center">
+    <img src="https://github.com/christianjtr/svelte-pokedex-pwa/blob/develop/samples/demo_compressed.gif" alt="gif-demo"/>
+</p>
+
+
+
+##### Home page preview
+
+![](./samples/pokedex_main.png)
+
+##### Detail page preview
+
+![](./samples/pokedex_detail.png)