Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://jagoda11.github.io/Periodic-Table-App/
🧪 Interactive Periodic Table App built with Vue 3, showcasing reactive components, state management with Pinia, comprehensive testing with Jest & Playwright, and deployed to GitHub Pages using GitHub Actions. 🚀
https://jagoda11.github.io/Periodic-Table-App/
awesome-list bootstrap5 chemistry css frontend gh-pages github-actions github-pages html5 jest lighthouse periodic-table pinia playwright responsive-design typescript vite vue vue3 vue3-typescript
Last synced: about 2 months ago
JSON representation
🧪 Interactive Periodic Table App built with Vue 3, showcasing reactive components, state management with Pinia, comprehensive testing with Jest & Playwright, and deployed to GitHub Pages using GitHub Actions. 🚀
- Host: GitHub
- URL: https://jagoda11.github.io/Periodic-Table-App/
- Owner: Jagoda11
- License: mit
- Created: 2024-02-20T19:02:20.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-09-13T02:25:14.000Z (4 months ago)
- Last Synced: 2024-09-13T15:07:22.887Z (4 months ago)
- Topics: awesome-list, bootstrap5, chemistry, css, frontend, gh-pages, github-actions, github-pages, html5, jest, lighthouse, periodic-table, pinia, playwright, responsive-design, typescript, vite, vue, vue3, vue3-typescript
- Language: HTML
- Homepage: https://jagoda11.github.io/Periodic-Table-App/
- Size: 2.46 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Periodic Table App 🧪
This project is an interactive periodic table of elements, built using Vue 3 🛠️. It utilizes modern web technologies and tools to provide a rich user experience with reactive components and state management.
## Deployment 🚀
The Periodic Table App is deployed and available live on GitHub Pages. You can interact with the live application by visiting the following URL:
[Periodic Table App Live Demo](https://jagoda11.github.io/Periodic-Table-App/#/periodic-table)
This deployment showcases the latest stable version of the app. Feel free to explore the interactive periodic table and discover more about the elements!
For details on how this app is deployed using TypeScript, GitHub Actions, and GitHub Pages, check out my Medium article: [Deploying a Vue 3 App with Vite, TypeScript, and GitHub Actions to GitHub Pages](https://medium.com/@jagoda11/deploying-a-vue-3-app-with-vite-typescript-and-github-actions-to-github-pages-ac240cdb473e)
## Technologies and Tools 🛠️
- **Core**:
- Vue 3 🖖 for the frontend framework.
- Pinia 📦 for state management.
- Vue Router 🚦 for SPA routing.
- **Styling**:
- Bootstrap 🎨 for responsive UI components and layout.
- **Development**:
- Vite ⚡ as the build tool and development server.
- **Testing**:
- Jest 🃏 for unit testing, ensuring that individual components work as expected.
- Playwright 🎭 for end-to-end testing, simulating user interactions and verifying the app's behavior in a browser environment.
- Lighthouse 🌅 for performance and quality auditing, providing insights into how the app can be optimized for speed, accessibility, and SEO.
- **Code Quality**:
- ESLint 🧹 for linting.
- Prettier 🎨 for code formatting.
- **TypeScript**:
- Used throughout the project for type safety 🛡️.
- **CI/CD**:
- GitHub Actions 🚀 for automating linting, building, and test runs.
- **Utilities**:
- Husky 🐶 for pre-commit hooks.
- Lint-Staged 🚩 for staged files linting.
## Code of Conduct 📜
We expect all contributors to adhere to our [Code of Conduct](./CODE_OF_CONDUCT.md) when participating in our project. Please review it before getting involved.
## Getting Started with the Periodic Table App 🚀
Follow these steps to set up the project on your local machine and get started with development.
## Initial Setup
1. **Clone the repository**:
Get the code on your local machine by cloning the repository and then navigate to the project directory:
```bash
git clone https://github.com/Jagoda11/periodic-table-app.git
cd periodic-table-app
```
2. **Install dependencies**:
Install the necessary project dependencies to get started with development:
```bash
npm install
```
## Key Scripts Explained
Here's a breakdown of the main npm scripts you'll use to develop, test, and audit the Periodic Table App:
- **Local Development Server**:
- `npm run dev`: 🌐 Starts the Vite development server for local development at `http://localhost:3000/Periodic-Table-App/`. Ideal for your day-to-day development activities.
- **Building for Production**:
- `npm run build`: 🏗️ Compiles and minifies the application for production, ensuring optimal performance.
- **Running Unit Tests**:
- `npm run test`: 🧪 Executes the Jest test suites to validate the functionality of individual components.
- **Performing Lighthouse Audits**:
- `npm run audit`: 🔍 Conducts a Lighthouse audit on your local server at `http://localhost:3000`, offering insights into the app's performance and quality.
- **End-to-End Testing**:
- `npm run test:e2e:concurrently`: 🤖 Starts a separate server for end-to-end testing on `http://localhost:3001` and runs Playwright tests. This ensures a clean, isolated environment for accurate testing.
By following these instructions and using the scripts provided, you'll be able to effectively develop, test, and optimize your Periodic Table App. Happy coding! 🎉
## Additional Resources 📚
- **License** 📄: For more information on how you can use this project, see the [LICENSE.md](./LICENSE.md) file.
- **Collaboration** 👥: If you're interested in contributing to the project, please review our [CONTRIBUTION.md](./CONTRIBUTION.md) guide for details on how to get started.
## Acknowledgments 🙏
This project utilizes various open-source libraries and frameworks. We extend our gratitude 🙌 to the contributors of these projects.