+ 
+
"
diff --git a/src/app.py b/src/app.py
new file mode 100644
index 0000000..a723a04
--- /dev/null
+++ b/src/app.py
@@ -0,0 +1,74 @@
+"""
+This module takes care of starting the API Server, Loading the DB and Adding the endpoints
+"""
+import os
+from flask import Flask, request, jsonify, url_for, send_from_directory
+from flask_migrate import Migrate
+from flask_swagger import swagger
+from api.utils import APIException, generate_sitemap
+from api.models import db
+from api.routes import api
+from api.admin import setup_admin
+from api.commands import setup_commands
+
+# from models import Person
+
+ENV = "development" if os.getenv("FLASK_DEBUG") == "1" else "production"
+static_file_dir = os.path.join(os.path.dirname(
+ os.path.realpath(__file__)), '../public/')
+app = Flask(__name__)
+app.url_map.strict_slashes = False
+
+# database condiguration
+db_url = os.getenv("DATABASE_URL")
+if db_url is not None:
+ app.config['SQLALCHEMY_DATABASE_URI'] = db_url.replace(
+ "postgres://", "postgresql://")
+else:
+ app.config['SQLALCHEMY_DATABASE_URI'] = "sqlite:////tmp/test.db"
+
+app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
+MIGRATE = Migrate(app, db, compare_type=True)
+db.init_app(app)
+
+# add the admin
+setup_admin(app)
+
+# add the admin
+setup_commands(app)
+
+# Add all endpoints form the API with a "api" prefix
+app.register_blueprint(api, url_prefix='/api')
+
+# Handle/serialize errors like a JSON object
+
+
+@app.errorhandler(APIException)
+def handle_invalid_usage(error):
+ return jsonify(error.to_dict()), error.status_code
+
+# generate sitemap with all your endpoints
+
+
+@app.route('/')
+def sitemap():
+ if ENV == "development":
+ return generate_sitemap(app)
+ return send_from_directory(static_file_dir, 'index.html')
+
+# any other endpoint will try to serve it like a static file
+
+
+@app.route('/
+ Rigo welcomes you to your API!!
+API HOST:
+Start working on your project by following the Quick Start
+Remember to specify a real endpoint path like:
+- """+links_html+"
+ 
+
+);
diff --git a/src/front/js/component/footer.js b/src/front/js/component/footer.js
new file mode 100755
index 0000000..670323e
--- /dev/null
+++ b/src/front/js/component/footer.js
@@ -0,0 +1,10 @@
+import React, { Component } from "react";
+
+export const Footer = () => (
+
+);
diff --git a/src/front/js/component/navbar.js b/src/front/js/component/navbar.js
new file mode 100755
index 0000000..af4b01e
--- /dev/null
+++ b/src/front/js/component/navbar.js
@@ -0,0 +1,19 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+export const Navbar = () => {
+ return (
+
+ );
+};
diff --git a/src/front/js/component/scrollToTop.js b/src/front/js/component/scrollToTop.js
new file mode 100755
index 0000000..e491b48
--- /dev/null
+++ b/src/front/js/component/scrollToTop.js
@@ -0,0 +1,20 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+class ScrollToTop extends React.Component {
+ componentDidUpdate(prevProps) {
+ if (this.props.location !== prevProps.location) {
+ window.scrollTo(0, 0);
+ }
+ }
+
+ render() {
+ return this.props.children;
+ }
+}
+
+export default ScrollToTop;
+ScrollToTop.propTypes = {
+ location: PropTypes.object,
+ children: PropTypes.any
+};
diff --git a/src/front/js/index.js b/src/front/js/index.js
new file mode 100755
index 0000000..e462320
--- /dev/null
+++ b/src/front/js/index.js
@@ -0,0 +1,12 @@
+//import react into the bundle
+import React from "react";
+import ReactDOM from "react-dom";
+
+//include your index.scss file into the bundle
+import "../styles/index.css";
+
+//import your own components
+import Layout from "./layout";
+
+//render your react application
+ReactDOM.render(Missing BACKEND_URL env variable
+Here's a video tutorial on how to update your backend URL environment variable.
+There's a file called
There's one variable called
-
+
- Make sure you backend is running on port 3001. +
- Open your API and copy the API host. +
- Open the .env file (do not open the .env.example) +
- Add a new variable BACKEND_URL=
your api host
+ - Replace
your api host with the public API URL of your flask backend sever running at port 3001
+
Note: If you are publishing your website to Heroku, Render.com or any other hosting you probably need to follow other steps.
+
+
+
+
+ Not found!} />
+
+
+
+
+
+ );
+};
+
+export default injectContext(Layout);
diff --git a/src/front/js/pages/demo.js b/src/front/js/pages/demo.js
new file mode 100755
index 0000000..7077ef8
--- /dev/null
+++ b/src/front/js/pages/demo.js
@@ -0,0 +1,41 @@
+import React, { useState, useEffect, useContext } from "react";
+import { Link } from "react-router-dom";
+
+import { Context } from "../store/appContext";
+
+export const Demo = () => {
+ const { store, actions } = useContext(Context);
+
+ return (
+
+
+ + + +
+ );
+};
diff --git a/src/front/js/pages/home.js b/src/front/js/pages/home.js
new file mode 100755
index 0000000..7b0be46
--- /dev/null
+++ b/src/front/js/pages/home.js
@@ -0,0 +1,26 @@
+import React, { useContext } from "react";
+import { Context } from "../store/appContext";
+import rigoImageUrl from "../../img/rigo-baby.jpg";
+import "../../styles/home.css";
+
+export const Home = () => {
+ const { store, actions } = useContext(Context);
+
+ return (
+ -
+ {store.demo.map((item, index) => {
+ return (
+
-
+
+ Link to: {item.title}
+
+ {// Conditional render example
+ // Check to see if the background is orange, if so, display the message
+ item.background === "orange" ? (
+
+ Check store/flux.js scroll to the actions to see the code +
+ ) : null} + +
+ );
+ })}
+
+ + + +
+
+ );
+};
diff --git a/src/front/js/pages/single.js b/src/front/js/pages/single.js
new file mode 100755
index 0000000..ce29fee
--- /dev/null
+++ b/src/front/js/pages/single.js
@@ -0,0 +1,28 @@
+import React, { useState, useEffect, useContext } from "react";
+import PropTypes from "prop-types";
+import { Link, useParams } from "react-router-dom";
+import { Context } from "../store/appContext";
+import rigoImageUrl from "../../img/rigo-baby.jpg";
+
+export const Single = props => {
+ const { store, actions } = useContext(Context);
+ const params = useParams();
+
+ return (
+ Hello Rigo!!
+
+
+
+ {store.message || "Loading message from the backend (make sure your python backend is running)..."}
+
+ + This boilerplate comes with lots of documentation:{" "} + + Read documentation + +
+
+ 
+
+ + + + Back home + + +
+ );
+};
+
+Single.propTypes = {
+ match: PropTypes.object
+};
diff --git a/src/front/js/store/appContext.js b/src/front/js/store/appContext.js
new file mode 100755
index 0000000..8c83f8b
--- /dev/null
+++ b/src/front/js/store/appContext.js
@@ -0,0 +1,46 @@
+import React, { useState, useEffect } from "react";
+import getState from "./flux.js";
+
+// Don't change, here is where we initialize our context, by default it's just going to be null.
+export const Context = React.createContext(null);
+
+// This function injects the global store to any view/component where you want to use it, we will inject the context to layout.js, you can see it here:
+// https://github.com/4GeeksAcademy/react-hello-webapp/blob/master/src/js/layout.js#L35
+const injectContext = PassedComponent => {
+ const StoreWrapper = props => {
+ //this will be passed as the contenxt value
+ const [state, setState] = useState(
+ getState({
+ getStore: () => state.store,
+ getActions: () => state.actions,
+ setStore: updatedStore =>
+ setState({
+ store: Object.assign(state.store, updatedStore),
+ actions: { ...state.actions }
+ })
+ })
+ );
+
+ useEffect(() => {
+ /**
+ * EDIT THIS!
+ * This function is the equivalent to "window.onLoad", it only runs once on the entire application lifetime
+ * you should do your ajax requests or fetch api requests here. Do not use setState() to save data in the
+ * store, instead use actions, like this:
+ **/
+ state.actions.getMessage(); // <---- calling this function from the flux.js actions
+ }, []);
+
+ // The initial value for the context is not null anymore, but the current state of this component,
+ // the context will now have a getStore, getActions and setStore functions available, because they were declared
+ // on the state of this component
+ return (
+ This will show the demo element: {store.demo[params.theid].title}
++ + + + Back home + + +