diff --git a/README.md b/README.md index 382941e..3257e6a 100644 --- a/README.md +++ b/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) + + +### 🎯 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**. + + +### 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) + + +### 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) ``` + + +### 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 +# ... +``` + + + +### Samples + +##### Live demo + +Click on the following link [GitHub page project](https://christianjtr.github.io/svelte-pokedex-pwa). + +##### Preview + + +

+ gif-demo +

+ + + +##### Home page preview + +![](./samples/pokedex_main.png) + +##### Detail page preview + +![](./samples/pokedex_detail.png) diff --git a/samples/demo.mp4 b/samples/demo.mp4 new file mode 100644 index 0000000..a31d228 Binary files /dev/null and b/samples/demo.mp4 differ diff --git a/samples/demo_compressed.gif b/samples/demo_compressed.gif new file mode 100644 index 0000000..65e2600 Binary files /dev/null and b/samples/demo_compressed.gif differ diff --git a/samples/demo_compressed.mp4 b/samples/demo_compressed.mp4 new file mode 100644 index 0000000..5f2abea Binary files /dev/null and b/samples/demo_compressed.mp4 differ diff --git a/samples/pokedex_detail.png b/samples/pokedex_detail.png new file mode 100644 index 0000000..3d3d618 Binary files /dev/null and b/samples/pokedex_detail.png differ diff --git a/samples/pokedex_main.png b/samples/pokedex_main.png new file mode 100644 index 0000000..b210a9c Binary files /dev/null and b/samples/pokedex_main.png differ