Git Product home page Git Product logo

user-app's Introduction

E-Bike Renting System - Progressive Web APP

๐Ÿšดโ€โ™‚๏ธ Readers Beware: This is a school project ๐Ÿšดโ€โ™€๏ธ

Welcome to the mobile app for our e-bike renting system.

Key Features:

  • Bike Rental & Return: Rent a bike with just a few taps and return it with equal ease.
  • Renting History: Take a trip down memory lane with a detailed log of all your rentals.
  • Payment History: Keep your finances on track by viewing all your past payments.

Quick Links

App Running Live

Get a feel for the apps features, functionality, and user interface (we recommend visiting the site on your phone):

  • Live Demo: Visit Lenticode to see the application live.

Root Repository

For a comprehensive view of all our related projects and to access the entire collection of repositories, please visit our root repository:

This root repository serves as the central hub for our projects, providing links and information to all associated repositories.

Here you will find instructions on how to set up and run all repositories on your local machine.


Custom Setup Instructions

While we recommend using our root repository for a smoother ride, you may choose to set up this repository directly, especially if you're planning to adapt the code. So, if you're feeling adventurous and want to ditch the training wheels, follow the steps below.

MapTiler API Key

This application utilizes MapLibre GL JS with tiles from MapTiler.

Adding Your Free Key

  1. Create or rename a .env file based on the .env.example.
  2. Add or update the PUBLIC_MAPTILER_API_KEY with your own key from MapTiler.
  3. Your key can be found on your MapTiler Cloud account page.
  4. If you don't have an API key yet, sign up for a free one at MapTiler Cloud.

REST API Configuration

The app interfaces with a REST API connected to a backend server and database.

  1. If not already done, create or copy the .env.example file to .env.
  2. Set PUBLIC_REST_API_URL to the server's URL.
  3. The server URL is no secret and is provided in the .env.example file.
  4. Server code can be found at JuliaLind/vteam-server.

GitHub OAuth App Setup

To test the app locally, you need to create your own GitHub OAuth App for authentication (unless you remove the auth check or come up with another solution):

  1. Go to your GitHub account settings, navigate to 'Developer settings' > 'OAuth Apps' and click 'New OAuth App'.
  2. In the 'Application name' field, enter a name for your app.
  3. Set the 'Homepage URL' to http://localhost:5173.
  4. For 'Authorization callback URL', enter http://localhost:5173/callback.
  5. Once created, note down the 'Client ID' and 'Client Secret'.
  6. Add these credentials to your .env file as PUBLIC_GITHUB_ID and GITHUB_SECRET.

For a more detailed guide on setting up the GitHub OAuth App, check out this tutorial by yours truly.

Local Development

Once you've created a project and installed the dependencies with npm install (or pnpm install or yarn), start a development server:

npm run dev

# Optionally, to open the app in a new browser tab:
npm run dev -- --open

Building for Production

To create a production version of the app:

npm run build

You can preview the production build with npm run preview.

Docker Deployment

To build a production version of the app and run it inside a container:

docker compose up --build

The app uses the node-adapter by default. You may need to install a different adapter for your target environment and change the app settings accordingly.

user-app's People

Contributors

kiwijos avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.