New App: Share Your Gender Pronoun in Your Bio

It takes me awhile to create an app. From the initial thought, the planning, the coding and then the deployment. My simple full-stack Flask app took almost one month to complete! Granted, I was learning Python and Flask along the way, it still took awhile.

So I decided to challenge myself and create an app all in one day. What I came up with was Pronounly, an easy way for people to share there gender pronoun in their bio. Users just have to enter pronounly.co/ and append their pronoun. So if you identify as a 'she', you would use pronounyl.co/she.

The app was created using React and deployed on Heroku. Instead of paying for Heroku's SSL certification I decided to try out Cloudflare — which is amazing might I add! It also handles my redirects much more intuitively than Google Domains, I believe.

Design is also a big part of my background. While I'm not a designer by any means, I am a photographer who's very nitpicky with how things look. I wanted to go with a more "natural" and brutalist design. No colors and no animations. Nothing crazy, nothing fancy.

Since I wanted the app to look simple, I also wanted the code to be simple since it was going to be a public repo for my resume. Here's what my App.js renders:

<Router>
      <Pronounly />
      <Switch>
        <Route exact path='/'>
          <About />
          <Importance />
          <Share />
        </Route>

        <Route exact path='/he'>
          <Pronoun pronoun='he' />
          <Example pronoun='he' />
          <Importance />
          <Share />
        </Route>

        <Route exact path='/she'>
          <Pronoun pronoun='she' />
          <Example pronoun='she' />
          <Importance />
          <Share />
        </Route>

        <Route exact path='/they'>
          <Pronoun pronoun='they' />
          <Example pronoun='they' />
          <Importance />
          <Share />
        </Route>

        <Route path='*'>
          {/* 404 */}
          <Contribute />
          <Importance />
          <Share />
        </Route>
      </Switch>

      <Footer />
    </Router>

I know it's a very simple website and that it has been done before, but I'm very happy with how it turned out and how I did it all in one day. I think doing more of these "one-day challenges" will help me become a more proficient coder as it forces me to prioritize important parts of my app. But right now, I'm working on another React app using data I scraped from IMDb to play Hangman!