Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/romanfama592/shortilin-client-web
Frontend web project for the "Shortilin" service created with Astro using a hybrid output, it allows the creation of shortened URLs and their redirection.
https://github.com/romanfama592/shortilin-client-web
astro astro-build docker npm shortener url-shortener vanilla-javascript vercel-deployment
Last synced: about 2 months ago
JSON representation
Frontend web project for the "Shortilin" service created with Astro using a hybrid output, it allows the creation of shortened URLs and their redirection.
- Host: GitHub
- URL: https://github.com/romanfama592/shortilin-client-web
- Owner: RomanFama592
- License: mit
- Created: 2023-08-10T01:47:17.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2023-09-26T01:04:32.000Z (over 1 year ago)
- Last Synced: 2024-12-17T11:09:21.547Z (about 2 months ago)
- Topics: astro, astro-build, docker, npm, shortener, url-shortener, vanilla-javascript, vercel-deployment
- Language: Astro
- Homepage: https://shtilin.vercel.app/
- Size: 71.3 KB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Shortilin
Frontend web project for the "Shortilin" service created with Astro using a hybrid output, it allows the creation of shortened URLs and their redirection.
__you need to raise the backend api to fully use the page.__
_the backend api repository:_
- **https://github.com/RomanFama592/shortilin-backend-api**
**check demo in Shtilin**
## 📑 Contents
1. [✍ **Features**](#-features)
1. [👩💻 **Commands**](#-commands)
2. [🐳 **Ready for Docker**](#-ready-for-docker)
3. [👋 **Contributors**](#-contributors)
3. [🚀 **Project Structure**](#-project-structure)
4. [👨⚖️ **License**](#-license)
## ✍ Features
- _generate shortened URLs on its main page_
- _by adding the ID, it performs redirection using an intermediate screen and a waiting time to display the complete URL_
- _the page has a general dark mode that is saved in the local storage to always remember your choice_
- _it includes a custom 404 error page_
## 👩💻 Commands
Clarification, all commands to execute the project have the "--host" flag to lift the project on your private network.
Allows building and running the project.
```sh
npm start
```
Allows running the project in development mode.
```sh
npm run dev
```
Allows only building the project.
```sh
npm run build
```
Allows only running the project if it's already built.
```sh
npm run preview
```
## 🐳 Ready for Docker
This project already includes a Dockerfile to create an image of itself using these commands:
- Exposed port: 10000
1. Move to root of client.
```sh
cd client-web-shortilin
```
2. Create the project's image.
```sh
docker build -t client-web-shortilin .
```
3. Run a container based on that image.
```sh
docker run -p 9000:10000 client-web-shortilin
```
## 👋 Contributors
## 🚀 Project Structure
Inside of your Astro project, you'll see the following folders and files:
```
/
│
├── .vscode/
│ ├── extensions.json
│ ├── launch.json
│ └── settings.json
├── public/
│ ├── favicon.svg
│ ├── image-meta-404.png
│ ├── light-off.png
│ ├── light-on.png
│ └── query-selector.js
├── src/
│ ├── components/
│ │ └── header.astro
│ ├── css/
│ │ └── index/
│ │ ├── button-get-url.css
│ │ ├── div-loader.css
│ │ ├── input-url.css
│ │ └── link-to-url.css
│ ├── layouts/
│ │ └── head.astro
│ ├── pages/
│ │ ├── 404.astro
│ │ ├── [toRedirect].astro
│ │ └── index.astro
│ ├── env.d.ts
│ └── utils.js
├── ...
└── tsconfig.json
```
## 👨⚖️ License
Distributed under the MIT License. See `LICENSE` for more information.