diff --git a/.env b/.env new file mode 100644 index 0000000..bbfc196 --- /dev/null +++ b/.env @@ -0,0 +1,3 @@ +BASE_URL = / + +API_HOST = https://conduit.productionready.io diff --git a/FRONTEND_INSTRUCTIONS.md b/FRONTEND_INSTRUCTIONS.md new file mode 100644 index 0000000..c09084c --- /dev/null +++ b/FRONTEND_INSTRUCTIONS.md @@ -0,0 +1,529 @@ +> *Note: Delete this file before publishing your app!* + +### Using the hosted API + +Simply point your [API requests](https://github.com/gothinkster/realworld/tree/master/api) to `https://conduit.productionready.io/api` and you're good to go! + +### Routing Guidelines + +- Home page (URL: /#/ ) + - List of tags + - List of articles pulled from either Feed, Global, or by Tag + - Pagination for list of articles +- Sign in/Sign up pages (URL: /#/login, /#/register ) + - Uses JWT (store the token in localStorage) + - Authentication can be easily switched to session/cookie based +- Settings page (URL: /#/settings ) +- Editor page to create/edit articles (URL: /#/editor, /#/editor/article-slug-here ) +- Article page (URL: /#/article/article-slug-here ) + - Delete article button (only shown to article's author) + - Render markdown from server client side + - Comments section at bottom of page + - Delete comment button (only shown to comment's author) +- Profile page (URL: /#/profile/:username, /#/profile/:username/favorites ) + - Show basic user info + - List of articles populated from author's created articles or author's favorited articles + +# Styles + +Instead of having the Bootstrap theme included locally, we recommend loading the precompiled theme from our CDN (our [header template](#header) does this by default): + +```html + +``` + +Alternatively, if you want to make modifications to the theme, check out the [theme's repo](https://github.com/gothinkster/conduit-bootstrap-template). + + +# Templates + +- [Layout](#layout) + - [Header](#header) + - [Footer](#footer) +- [Pages](#pages) + - [Home](#home) + - [Login/Register](#loginregister) + - [Profile](#profile) + - [Settings](#settings) + - [Create/Edit Article](#createedit-article) + - [Article](#article) + + +## Layout + + +### Header + +```html + + + + + Conduit + + + + + + + + + + + +``` + +### Footer +```html + + + + +``` + +## Pages + +### Home +```html +
+ + + +
+ +
+ +
+``` + +### Login/Register + +```html +
+
+
+ +
+

Sign up

+

+ Have an account? +

+ +
    +
  • That email is already taken
  • +
+ +
+
+ +
+
+ +
+
+ +
+ +
+
+ +
+
+
+``` + +### Profile + +```html +
+ +
+
+
+ +
+ +

Eric Simons

+

+ Cofounder @GoThinkster, lived in Aol's HQ for a few months, kinda looks like Peeta from the Hunger Games +

+ +
+ +
+
+
+ +
+ +
+ +
+``` + +### Settings + +```html +
+
+
+ +
+

Your Settings

+ +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ +
+
+
+ +
+
+
+``` + +### Create/Edit Article + +```html +
+
+
+ +
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+
+ +
+
+
+ + +``` + +### Article + +```html +
+ + + +
+ +
+
+

+ Web development technologies have evolved at an incredible clip over the past few years. +

+

Introducing RealWorld.

+

It's a great solution for learning how other frameworks work.

+
+
+ +
+ +
+ +
+ +
+ +
+ +
+
+ +
+ +
+ +
+
+

With supporting text below as a natural lead-in to additional content.

+
+ +
+ +
+
+

With supporting text below as a natural lead-in to additional content.

+
+ +
+ +
+ +
+ +
+ +
+``` diff --git a/README.md b/README.md new file mode 100644 index 0000000..1edeae6 --- /dev/null +++ b/README.md @@ -0,0 +1,21 @@ +# ![RealWorld Example App](logo.png) + +> ### [Vue3](https://v3.vuejs.org/) codebase containing real world examples (CRUD, auth, advanced patterns, etc) that adheres to the [RealWorld](https://github.com/gothinkster/realworld) spec and API. + + +### [Demo](https://mutoe.github.io/vue3-realworld-example-app) [RealWorld](https://github.com/gothinkster/realworld) + + +This codebase was created to demonstrate a fully fledged fullstack application built with **Vue3** including CRUD operations, authentication, routing, pagination, and more. + +We've gone to great lengths to adhere to the **Vue3** community styleguides & best practices. + +For more information on how to this works with other frontends/backends, head over to the [RealWorld](https://github.com/gothinkster/realworld) repo. + +# Getting started + +```shell script +yarn install +yarn dev +yarn build +``` diff --git a/logo.png b/logo.png new file mode 100644 index 0000000..17d795d Binary files /dev/null and b/logo.png differ