ArkDashboard

Website for ARK: Survival Evolved Basespots and more
Explore the docs »

Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Getting Started
   • Prerequisites
   • Installation
3. Usage
   • Pages
   • Prisma & Database
   • SDL
   • Cells
   • Storybook
   • Testing
4. Roadmap
5. Contributing
6. License
7. Contact
8. Acknowledgments

About The Project

Description in progress

(back to top)

Built With

This project is mainly written in React, together with these frameworks and libraries:

Getting Started

To get a local copy up and running follow these simple steps.

Prerequisites

To run this project you'll need to have nodejs installed on your computer. You can download it here

• Redwood requires Node.js (>=14.19.x <=16.x) and Yarn (>=1.15)
• Are you on Windows? For best results, follow redwood's Windows development setup guide

Get latest npm version

• npm

  npm install npm@latest -g

• yarn

  npm install -g yarn

Installation

1. Clone the repo

   git clone https://github.com/ArvidWedtstein/ArkDashboard.git

2. Install NPM packages

   npm install

3. Create a .env file in the root directory and add your environment variables. I used supabase postgres for this project, so you'll need to create a supabase account and add the url and key to your .env file. You can also use a different database, but you'll need to change the database url in the api/prisma/schema.prisma file.

    DATABASE_URL=postgresql://<user>:<pass>@db.<project>.supabase.co:<port>/postgres

4. Check if everything is fine.

   yarn redwood check

(back to top)

Deploying

Deploying image to scaleway:

1. build the docker image

   docker build -t ArkDashboard .

2. pull docker image

   docker pull ubuntu:latest

3. tag the image

   docker tag ArkDashboard arvidwedtstein/ArkDashboard:latest

4. push the image to docker hub

   docker push arvidwedtstein/ArkDashboard:latest

Usage

Project can be used to browse through some of the best Ark: Survival Evolved spots out there, and much more.

To generate types:

yarn rw g types

Generate Secret:

yarn rw g secret

(back to top)

To deploy:

yarn rw prisma migrate deploy

To open redwood console:

yarn rw c

Seed the database with

yarn rw prisma db seed

Sometimes typescript doesn't detect all changes so you'll have to restart the server by pressing Ctrl + Shift + P and then typing "Restart TS Server"

Check for stuff:

yarn redwood check

Pages

Pages can be generated with the yarn rw g page command. For example, to generate a page named About:

yarn rw g page About

g is short for generate

Database

Redwood wouldn't be a full-stack framework without a database. It all starts with the schema. The schema.prisma file is located in api/db

Local supabase postgresql setup:

supabase login

supabase init

supabase start

To view SQLite data in a GUI:

yarn rw prisma studio

Redwood uses Prisma, a next-gen Node.js and TypeScript ORM, to talk to the database. Prisma's schema offers a declarative way of defining your app's data models. And Prisma Migrate uses that schema to make database migrations hassle-free:

yarn rw prisma migrate dev (yarn rw prisma db push for mongodb)

# ...

? Enter a name for the new migration: › create <model>

rw is short for redwood

You'll be prompted for the name of your migration. create <model>

With yarn rw g scaffold <model>, Redwood created all the pages, components, and services necessary to perform all CRUD actions on our table.

Fucked up the database once again? Start all over again with: yarn rw prisma migrate reset

SDL

If you only want to generate services for your table, you can use: yarn rw g sdl <model>

Cells

Cells are a declarative approach to data fetching and one of Redwood's signature modes of abstraction. By providing conventions around data fetching, Redwood can get in between the request and the response to do things like query optimization and more, all without you ever having to change your code.

A Cell can be generated with yarn rw generate cell <name>

Single Item Cell vs List Cell

Sometimes you want a Cell that renders a single item, like the example above, and other times you want a Cell that renders a list. Redwood's Cell generator can do both. Just specify the --list flag and you'll get a list cell yarn rw generate cell equipment --list

Cells has up to seven exports to work with, only 2 are required though (success and QUERY).

Name	Type	Description
QUERY	string|function	The query to execute
beforeQuery	function	Lifecycle hook; prepares variables and options for the query
isEmpty	function	Lifecycle hook; decides if Cell should render Empty
afterQuery	function	Lifecycle hook; sanitizes data returned from the query
Loading	component	If the request is in flight, render this component
Empty	component	If there's no data (null or []), render this component
Failure	component	If something went wrong, render this component
Success	component	If the data has loaded, render this component

Storybook

I personally don't make use of storybook in this project, but it's a great tool to use when you're working on a design system.

Don't know what your data models look like? That's more than ok—Redwood integrates Storybook so that you can work on design without worrying about data. Mockup, build, and verify your React components, even in complete isolation from the backend:

yarn rw storybook

Before you start, see if the CLI's setup ui command has your favorite styling library:

yarn rw setup ui --help

Testing

It'd be hard to scale from side project to startup without a few tests. Redwood fully integrates Jest with the front and the backends and makes it easy to keep your whole app covered by generating test files with all your components and services:

yarn rw test

To make the integration even more seamless, Redwood augments Jest with database scenarios and GraphQL mocking.

Debug:

yarn rw build web

and then:

yarn rw prerender --dry-run

Roadmap

• Get to know Redwood and React
• Add a base spot system
• Add a map system
• Testing
• Github CI Testing
• Fix readme

See the open issues for a full list of proposed features (and known issues).

(back to top)

Contributing

Any contributions you make are greatly appreciated.

If you have a suggestion that would make this project better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! <3

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)

License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)

Contact

No contact :)

(back to top)

Acknowledgments

(back to top)