flapjackstan / clicks_and_cookies

Django App - Tracks Clicks and Cookies
MIT License
1 stars 0 forks source link

REST API Architecture #7

Open flapjackstan opened 1 year ago

flapjackstan commented 1 year ago

Given that we're using a REST API to make our app, we might as well take advantage of there being a structured and repeatable way to handle receive and serve data. We should ideally be able to serve a linkinbio type site for multiple users. e.g.

https://our-site/taza -> taza linkinbio https://our-site/jorge -> jorge linkinbio https://our-site/elmer -> elmer linkinbio https://our-site/starbucks -> starbucks linkinbio

implementing this kind of api would also allow us to expand on potential usecases and provide apps for coffee shop owners.

https://our-site/taza/apps -> user login with list of apps we can potentially provide and charge a few dollars for. Maybe something like cold brew logs tracker and site visitors tracker.

Best case scenario, we can make money from this, worst case we can put this on our resume and know we can make apps on our own.

flapjackstan commented 1 year ago

@jhdz85 see above. We can talk about it when we meet again. We will likely have to restructure the tables in the database.

jhdz85 commented 1 year ago

weekly/bi-weekly/monthly automated emails with the metrics too

jhdz85 commented 1 year ago

Learning curve with how to do with React, multiple pages aka accounts. The POST data will be easy tho.

flapjackstan commented 1 year ago

yeah same, im reading some more about the django backend right now and how to support that too. im thinking this url pattern should work, but we'll see how it goes as we start implementing. https://our-site/starbucks

flapjackstan commented 1 year ago

Learning curve with how to do with React, multiple pages aka accounts. The POST data will be easy tho.

Reading more about this. We are currently using the npm start command to create a small web server for us that runs the react front end app. Were going to want to be able to switch from using npm as our server to using nginx and use something like this to handle the routing redirects.

So our site should reflect something like this.

our-site.com -> landing page (whatever we want) our-site.com/taza -> react axios request -> djangolinkinbio rest service -> react build page with links in response

I'm also going to have to use nginx with django as well from what im seeing. Learning curve for us both 🥲

flapjackstan commented 1 year ago

API Version 0.0.1

The api return from the backend is going to look like this.

Key things to note are that each item displayed is a card. A card can have 2 sides. A front side and a back side. Frontside is what the user will first see. If there is a backside, the card will have an animation indicating it can be clicked. Upon click, the card will turn and show its back sides

Card types and configs

Image: {size, cloud storage url, subtext, backside} Text: {header text, subtext, backside} Redirect: {url, display text} Form: form type

size - length and width dimensions cloud storage url - url to where image is stored subtext - text in small font header text - text in large font url - href url display text - display text with url as href form type - contact form, email subscribe form backside - Card or NA

{ 
     0 : { 
               “front card” : { 
                                       “card type” : “type”, “config” : {config for defined type}}, 
               “back card” : {
                                       “card type” : “type”, “config” : {config for defined type}}},
     1 : {
               “front card” : { 
                                       “card type” : “type”, “config” : {config for defined type}}, 
               “back card” : NA}
      ....
 }

An example of this can look like this

{ 
     0 : { 
               “front card” : { 
                                       “card type” : “Image”, “config” : {"size": my_size, "cloud storage url": "https://google.cloud.storage.jamaica_image.com", subtext: "Carbonated Jamaica Fresca"}}, 
               “back card” : {
                                       “card type” : “Text”, “config” : {"header text": "Carbonated Jamaica", "subtext": "Made with these ingredients"}}},
     1 : {
               “front card” : { 
                                       “card type” : “Redirect”, “config” : {"url": "http://venmo.com", "display text": "Venmo Us!"}}, 
               “back card” : NA}
      ....
 }