Back to projects
Finished
1minutesocialpost
The complete front end of an app for creating and scheduling social content: sixteen working screens, built before the server existed.
|
RoleFront-end design and development
TeamSolo project
Technologies9 technologies
What it is
A React application written to be fully navigable before there was any server to talk to. Every piece of data goes through a service layer that already exposes the same signatures the real client will have: the day the server arrives, one folder gets rewritten and the rest of the app never notices. Inside there is the three-step guided post creation, the scheduling calendar, brand identity, the credit count with its ceiling, and a public landing page with its animations. All in Italian, with its own palette and mark.
Main features
Creation
- A three-step guided flow, with the credit cost always in view
- Six angles to combine, or a theme written by hand
- Image formats for portrait, square and story
Scheduling
- Monthly calendar with the scheduled posts
- Dates and times proposed from the chosen cadence, and editable
- A list of publications with filters and sorting
Brand
- Several brand identities, with a limit on the free plan
- Connecting the social accounts
- Palette and tone of voice carried into the generated content
Plan
- Monthly credits that go down with every generation
- A limit-reached message instead of an error
- A comparison of the available plans
Problems and solutions
Building an interface on top of fake data almost always means rewriting it when the real data arrives: components get used to receiving everything at once, and with a network in the middle nothing works any more.
SolutionThe fake services return promises, with a simulated delay between eight tenths of a second and two seconds, and all of them go through the same request handler the real client will use. So the waits, the errors and the empty lists were already designed and tested while the server did not yet exist.
The reference application froze on a blank screen halfway through creating a post: an error response nobody had planned for.
SolutionEvery step states explicitly what to show while loading, when it fails and when there is nothing to show, with a safety net around the whole application that leads to a recovery screen instead of the void.
The landing page animations — the mockup that follows the mouse, the elements that float — are a problem for anyone prone to motion sickness, or for anyone who has simply asked the system to move things less.
SolutionAll the movement is conditional on that preference: when it is set, the tilt and the float switch off and the content stays exactly where it is, visible and readable. It is not a reduced version, it is the same page holding still.
Project access
Technologies
React
TypeScript
Vite
Tailwind CSS
Radix UI
React Router
TanStack Query
Framer Motion
Vitest
Contents
- • What it is
- • Main features
- • Problems and solutions
