Groceristar Roadmap #2 Backend/Frontend separation [part 1]
Story behind
Ok, the main goal of creating another repository is to separate frontend logic of GroceriStar project with API logic. Right now, at current project stage, it looks like a mess. The project is simple, but it must be improved before complexity will grow.
I dig into different options with a question — how I can improve ‘flow’ when client and server are separated, files have a good structure, the project has build, testfeatures and can be updated/extended easily. All times, when I read articles I saw that only React with Webpack can provide such kind of functionality. So I decided that in future I'll split front and API into two different projects.
Big picture
Frontend must :
- Recreated from scratch, tested and optimized
- Connected to a GS project
- The design must be improved
- Pages must load fast
- Scripts must be organized, minified and combined together.
- Responsive for sure.
From what we can start
Right now we have an ugly homepage. Yep, it bad, cause I created it from landing page builder. I didn’t want to spend time on it. But content for LP was completed and can be an advantage for a next page creation steps.
Create a brand new, shiny page will be the first task. This work is on progress.
This part of work related to account page templates. Next part are pages, that not related to the shopping list and homepage. Right now these pages are inner pages. And they look like a default dashboard with bootstrap styles — and this is how they built. I grab some styles, HTML templates from my previous projects.
These pages don’t have a one simple UI at this moment. It’s just a pages, that connected. A lot of people confused about how they can use the product. So it can be different ways to accomplish this problem. It must be discussed with other team members.
We started to work on custom design, not just adjusting free HTML templates to our needs. There a lot of work down to the road, but it shows impressive results so far. Soon we’ll have an update homepage design too. Working on it right now.
Shopping list views.
On release #0 I just copy layouts and js code from TODOMVC repository and apply it into GS. But it has some troubles with logic. And it was badly optimized for mobiles. So when my friend starts joking about it(Denis Petrov) — I spend a few weeks and create it basically from scratch. I find an HTML framework with styles related to mobile form elements and apply GS logic into that elements. Maybe we need to update it too. Not sure about doing this. Maybe it’ll be better to implement a gap between GS and some other TODO list projects. cause I don’t want to reinvent the wheel — better to focus on expanding features of it.
At this repository we will discuss this possibilities.
Sitemaps (simple and advanced)
Current views(release #1)
forms
clear-purchased
clone-grocery
grocery
purchased
unpurchased
update-namelayouts
dashboard
grocery
homepage
jquery
landos
layout — main
material-layout
selectablepages
— departments
— grocery
— clone-form-page
— view-grocery-new
— view-grocery
— view-ultimate-List
— shopping
— static
— credits
— Landing
— privacy
— termsaccount
change-grocery-list-name
clear-page
dashboard
department
favorites
grocerylist
homepage
index
ingredient
lastgrocery
login
manage-grocerylist
printgrocery
purchased
signup
Onboarding
We’ll discuss it here
Can grocery list be moved into an app?
I need to find out — can we grab some logic from our frontend pages, copy-paste it and convert into React Native, cause I want to build an app in the future.
