Giter VIP home page Giter VIP logo

flexile-feature's Introduction

Gumroad Application - Software Engineering Freelance Position - Open Challenge

Author: Alberto Giunta

Object: Flexile - Public Portfolio page + Edit Modal

Live URL: https://ag-flexile-public-portfolio.vercel.app/f/alb

Goal of this feature:

  • for flexile talents: they can flex a unique, custom and no BS flexile shortlink with their portfolio and contact info. Them being part of the Flexile community should feel elitarian for both the talent and the company looking at the portfolio. They can sell services directly from their public page, and ideally the whole monetization flow should go through Flexile itself.
  • for companies: to meet the Flexile brand and product if they're not Flexile clients yet, and to have a trustworthy source of info regarding the past history and work achievements of a certain freelancer.

Stack:

  • Astro
  • Tailwind
  • React

Workflow:

  • Cursor
  • Claude 3.5 Sonnet
  • ~3 hours total (it could have been less tho: I did some experimentation and styling that took some time + didn't want to rush it)

Notes:

  • I tried to reach a look&feel that felt as much like Flexile as I could make it, especially in the public page UI
  • There's no real DB attached to the page and the "Save Changes" button in the Edit modal is not implemented. I didn't think it was too useful to showcase as it'd have been a single POST request. I focused more on making it feel "at home" than go full circle with the functionality.
  • I used astro.build as a meta framework, as it allows to write pages and components each in the most sensical way for their use case and I thought it might have been interesting for you to see what it could look like:
    • the public page is static, SSR and written in pure html
    • the modal is in React and rendered on the client

image CleanShot 2024-08-07 at 17 37 37

flexile-feature's People

Contributors

albertogiunta avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.