Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/prabhuignoto/boxd
Production grade web client for Dropbox
https://github.com/prabhuignoto/boxd
apollo apollo-client dropbox dropbox-api dropbox-client graphql redis vue vue-dropbox vuejs
Last synced: about 1 month ago
JSON representation
Production grade web client for Dropbox
- Host: GitHub
- URL: https://github.com/prabhuignoto/boxd
- Owner: prabhuignoto
- License: mit
- Created: 2018-10-17T18:47:42.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-11T22:07:30.000Z (almost 2 years ago)
- Last Synced: 2024-05-01T16:07:01.180Z (7 months ago)
- Topics: apollo, apollo-client, dropbox, dropbox-api, dropbox-client, graphql, redis, vue, vue-dropbox, vuejs
- Language: Vue
- Homepage:
- Size: 8.79 MB
- Stars: 9
- Watchers: 3
- Forks: 1
- Open Issues: 11
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# Boxd
[](https://dev.azure.com/prabhummurthy/boxd/_build/latest?definitionId=2&branchName=master)
[](https://www.codacy.com/manual/prabhuignoto/boxd?utm_source=github.com&utm_medium=referral&utm_content=prabhuignoto/boxd&utm_campaign=Badge_Grade)
[](https://deepscan.io/dashboard#view=project&tid=10074&pid=12749&bid=201583)
[](https://depfu.com/github/prabhuignoto/boxd?project_id=13611)
A Modern Web Client for Dropbox
## Development Setup
### Server Prerequisites & Installation
Redis and MongoDB are mandatory prerequisites for the server to function. Please install [Redis](redis) and [MongoDB](mongo) before proceeding.
Please create a [Pusher](pusher) account and add the api details in the .env file (refer setting up the environment)
Once all the prerequisites are satisfied, simply start the server app by running the following command.
```sh
cd /server
yarn run install && yarn run dev
```
If everything setup correctly, you should see server running message
### Client Prerequisites & Installation
Please create a [Pusher](pusher) account and add the api details in the .env file. refer [Setting up the environment](#Setting-up-the-environment)
```sh
cd /ui
yarn run install && yarn run serve
```
## Preview
## Setting up the environment
### Server settings
Following are the mandatory environment variables for the Server
| Environment Variable | Description | Value |
|-----------------------|--------------------------------------------------|----------------------------------------------------------|
| CLIENT_ID | Client Id of the App registered with Dropbox | |
| CLIENT_SECRET | Client Secret of the App registered with Dropbox | |
| OAUTH_AUTHORIZE_URL | Dropbox's authorization URL | [https://www.dropbox.com/oauth2/authorize](dropbox-auth) |
| OAUTH_TOKEN_URL | URL to fetch the access token | [https://api.dropboxapi.com/oauth2/token](dropbox-token) |
| REDIS_HOST | Host information of your locally installed redis | 127.0.0.1 |
| REDIS_PORT | Port info | 6379 |
| REDIS_PASSWORD | Password for Redis Authentication | |
| SESSION_COOKIE_MAXAGE | | |
| SESSION_SECRET | | |
| MONGO_DB_URL | | mongodb://localhost |
| MORGAN_LOG_MODE | | |
| CORS | | |
| APP_LOGIN | Frontend App's Login page URL | |
| DASHBOARD | Frontend App's Landing page URL | |
| PUSHER_APP_ID | Application Id of your Pusher Instance | |
| PUSHER_APP_KEY | Application key of your Pusher Instance | |
| PUSHER_APP_SECRET | Application secret of your Pusher Instance | |
The server uses dotenv to load env variables. please create a .env file and add all the above mentioned settings.
## Built with
- [Vue.JS](vue) - The frontend app is written in Vue with complete support for [Typescript](graphql).
- [Apollo Client](apollo) - The client uses vue-apollo to talk to the graphql server.
- [Fastify](fastify) - Server app is powered by [Fastify](fastify) and it hosts the Apollo-Server. It also manages File upload/download , Authentication & Authorization.
- [Graphql (powered by apollo-server-fastify)](graphql) - Fastify internally uses apollo-server-fastify and exposes a GraphQLized endpoint for consumption.
- [Dropbox API for Node.JS](dropbox) - Dropbox SDK for NodeJS.
- [Redis for Session Management](redis) - Session Management is controlled by fastify-session. The sessions are stored in a dedicated Redis store.
- [Agenda](agenda) - The Server employs agenda for various polling mechanisms (for e.g batch check of dropbox operations).
- [MongoDB](agenda) - MongoDB is a prerequisite for Agenda (ref Agenda Docs for more information).
## What's new
- The UI now sports a new look and feel with a better user experience.
- The server and the frontend apps have been rewritten in Typescript.
- Migrated all the server side code from express to Fastify for better performance and simplicity.
- Frontend app is migrated to the latest version of Vue.
- Support for Pusher - Realtime notifications are now powered by Pusher.
## Meta
Prabhu Murthy – [@prabhumurthy2](https://twitter.com/prabhumurthy2) – [email protected]
Distributed under the MIT license. See `LICENSE` for more information.
[https://github.com/prabhuingoto/](https://github.com/prabhuingoto/)
[vue]: https://vuejs.org
[graphql]: https://graphql.org
[apollo]: https://www.apollographql.com/
[redis]: https://redis.io/
[dropbox]: https://www.dropbox.com/developers/documentation/javascript
[fastify]: https://fastify.io/
[logo]: ./boxy-logo.png
[home]: ./boxy-mockup.png
[mongo]: https://www.mongodb.com/
[pusher]: https://pusher.com
[dropbox-auth]: https://www.dropbox.com/oauth2/authorize
[dropbox-token]: https://api.dropboxapi.com/oauth2/token