On google sign in button click the users should be taken to a Google form that collects their profile picture, link button labels, links, and display name

Create website for @imjaewilliams

Create an API to manage links

Goal is to recreate linktree functionality. User should be able to edit their profile using the webpage

Create website for @cryptoclasses

Change order of link buttons UI

Manage profile page should be able to reorder button links but does not affect backend just yet

https://www.figma.com/file/eFIiK1IX3B1RYcukfOzWJ7/FyrePage?node-id=0%3A1

Manage profile page

Only web components no UI functionality yet

Design: https://www.figma.com/file/eFIiK1IX3B1RYcukfOzWJ7/FyrePage?node-id=0%3A1

Edit bio API endpoint

Create an API endpoint that edits a Profile bio by sending a POST request to http://localhost:8000/v1/bio with the following request body {"bio": "my awesome bio!"}

Helpful references:

Files: FyrePage/backend/api/: tests.py, urls.py, views.py, models.py
Documentation: https://www.djangoproject.com/, https://www.django-rest-framework.org/

Topics you will want to research in the documentation:

Writing tests using Django Web (https://docs.djangoproject.com/en/3.2/topics/testing/overview/)
Writing tests using Django REST https://www.django-rest-framework.org/api-guide/testing/
Defining a model (https://docs.djangoproject.com/en/3.2/topics/db/models/)
Creating an API endpoint (https://www.django-rest-framework.org/api-guide/views/#function-based-views)
Making Queries (https://docs.djangoproject.com/en/3.2/topics/db/queries/)

HMU if you need any help! :-)

Change .png to .jpeg

Every reference to .png should be changed to .jpeg because that's the default format of what I get from social media profiles

Create link editor mockups

Should include all different types of links:

Google Forms not working

Clicking on landing page button requires you to have special access to use Google Forms. Should be accessible to everyone

Create landing page

Figma mockup: https://www.figma.com/file/eFIiK1IX3B1RYcukfOzWJ7/Webby-MVP?node-id=0%3A1

Manage URL modal form

Can literally just be a javascript form if you want https://www.w3schools.com/js/tryit.asp?filename=tryjs_prompt

Figma design: https://www.figma.com/file/eFIiK1IX3B1RYcukfOzWJ7/FyrePage?node-id=473%3A154

Page Compiler

The page compiler will be an essential part of this application. It will be thing that will control the dynamic aspect of our pages. There are many things that I want to include in this, but the main purpose of this is flexibility. Because we will be going up against some tough competition, we are going to need something that will expand to the moon and beyond.

Concept

Due to the sheer amount of customization that I want to be able to provide to the user, I have come up with a concept for a way too easily and efficiently compile data into fully functioning pages. The Idea is that we take all of the data from the database or storage medium, and we give it to the compiler will take it and figure out how everything can be styled, how everything needs to be laid out, what will not work and what will work, if user provided API endpoints do or do not work and weather or not the template query will or will not work, and the list goes on. This will allow us to add 110% custom panels to the page without compromising on performance, readability, or user experience.

Customization

After consulting many different applications and websites, I have decided to not just have a simple UI drag-and-drop editor, I want to have a profile editor so powerful that both a noob and an experienced web designer veteran could come and create an amazing looking page with minimal effort. But it will go one step further.

Because not everybody will understand complex topics such as dynamic page generation, we'll have the editor be fairly simple on the surface, but if you want, you can customize any object on the page with minimal effort and it will simply work. This will allow for ultra-customization to occur even for the simple UI.

Panels and Panel Types

Because panels are the most important aspect of the profile page, it is important that we are concise on how we want to approach these. To begin we need to be able to have many different panel types so the idea is that we will have the compiler pull a list of all panel types and their optional and required parameters, and the file where the panel logic is stored. This way we can dynamically generate panels without having to deal with too many unknowns.

Because the panels will be very customizable, you will be able to create fully custom panels which you can add css, markdown, and html to so that you can add your own flair to it. This is very cool because it will allow you to have panels that you would've never been able to have before.

Styling And Color Schemes

Because this will be ultra customizable, you will be able to completely customize the background AND the foreground. This will require image processing so that you can dynamically change the color scheme of the page depending on what the colors, brightness, and ascents of the background/background image are. This can be done through many different methods, but I am going to go the route of mathematically calculating these style attributes.

Completely custom JSON.

Because this will completely run off of JSON, you should be able to backup, and upload JSON files that can be read as page configs which will be stored within the database. When doing this you can have a file with all of the attributes in the JSON configuration file so that way you can validate these files and throw errors as needed.

{
   "links": [
      {
         "label": "Check out my twitter!",
         "link": "https://twitter.com/stephencurry",
         "order": 1
      },
      {
         "label": "Check out my instagram!",
         "link": "https://instagram.com/stephencurry",
         "order": 2
      },
      {
         "label": "Check out my snapchat!",
         "link": "https://snapchat.com/stephencurry",
         "order": 3
      }
    ]

}

You will need to define a Links model with the following properties:
Write a test that creates link objects in the database then makes an API call and verifies the JSON response is correct.

Helpful references:

Files in FyrePage/backend/api/: tests.py, urls.py, views.py, models.py
Documentation: https://www.djangoproject.com/, https://www.django-rest-framework.org/

Topics you will want to research in the documentation:

Writing tests using Django Web (https://docs.djangoproject.com/en/3.2/topics/testing/overview/)
Writing tests using Django REST https://www.django-rest-framework.org/api-guide/testing/
Defining a model (https://docs.djangoproject.com/en/3.2/topics/db/models/)
Creating an API endpoint (https://www.django-rest-framework.org/api-guide/views/#function-based-views)
Making Queries (https://docs.djangoproject.com/en/3.2/topics/db/queries/)

HMU if you have any questions or need any help! :-)

drewrobles / fyrepage Goto Github PK

fyrepage's People

Contributors

Watchers

fyrepage's Issues

Page Compiler

Concept

Customization

Panels and Panel Types

Styling And Color Schemes

Completely custom JSON.

Recommend Projects

Recommend Topics

Recommend Org