flexbox / weshipit.today

Monorepo for weshipit.today —the home of React Native developers who release every day.

• 🔭 I’m working on universal native apps for Android, iOS, and the web with React Native, Expo, and Next.js.
• 🌱 I’m currently learning TypeScript, GraphQL and TensorFlow.js.
• 👨‍💻 All of my public speaking is available at https://davidl.fr/talks.

Most Recent Blog Posts

• How I wrote and published The Road to React Native book
• My Growth Hack Checklist for Spotify
• How to build DIY ergonomic desk for less than 99€
• What I learned at React Finland Workshop with Nik Graf
• Clean up macos for a productive setup following Marie Kondo advices

Most Recent Videos

Tools I use

Statistics are extracted from my public activity and doesn't reflect completely the work with my clients. Feel free to contact me if you want to know more about my skills.

Follow Me

• Follow @flexbox_ on Twitter
• Follow @flexbox on Medium
• Follow @flexbox on Product Hunt
• Follow @flexbox on Figma
• Add David Leuliette on LinkedIn

weshipit.today's Issues

Seach component

As a user,
I can search for "payment",
So that it displays only the tools with payment.

Example:

• add a Text Search Component
• Search into Description
• Add data Payment to <TypeFilter />

Storybook Doc Blocks

As a UI engineer
I can have access to storybook-doc-blocks
So that I do not waste time

https://chan.dev/storybook-doc-blocks-for-design-system-documentation/

• add ColorPalette
• add Typeset
• add IconGallery

`react-native-tools`: filter by type

• fix responsive, you can use grid and gap
• add arrow > from Heroicon

Is your feature request related to a problem? Please describe.
add navigation for topics

Describe the solution you'd like

GitHub to LinkedIn

Phase 1

• Create a new project
• Add Nextauth https://next-auth.js.org/getting-started/example
• create a landing page https://www.mixo.io/site/git-link-ai-9ghoo/index.html
• Github connect
• Linkedin connect

Phase 2

• Webhook listen to github event on /api folder
• Call OpenAI api
• Share results on LinkedIn

Phase 3

• Stripe payment link

`/clients` add call to action

As a visitor
I can add my logo on the
So that It add my logo on the client page

---

example https://testdouble.com/services

Basic SEO

• Fix SEO title for index page

sitemap

• add robots.txt
• add sitemap.xml
  https://github.com/vercel/next.js/tree/canary/examples/with-sitemap

migrate `Text` component to `cva`

As a dev
I can use Text intent="h1" className="mp-12"
So that I have the tailwind IntelliSense autocomplete

Add details on a separate page

• Add details on a separate page

remplace

Welcome to Slug!

Like https://weshipit.today/react-native-serverless-api/realm
Example https://web.archive.org/web/20220129045838/https://www.lemstash.com/tool-elements/lemlist

add `/clients`

As a client new lead
I can see the client list
So that it builds trust in the company

---

• Copy the content from https://www.planetargon.com/clients
• Add prismic

interface Client {
  id: id // type random
  name: string
  logo: file // .svg
  isVisibleHomepage: boolean
}

• add .env https://vercel.com/docs/concepts/projects/environment-variables

Add a section
https://missionctrl.dev/ have a nice approach with this tools

add dark mode

Is your feature request related to a problem? Please describe.
Add darkmode like in https://davidl.fr/
we should not have a button, just follow the system preference from the OS.

Describe the solution you'd like
https://egghead.io/blog/tailwindcss-dark-mode-nextjs-typography-prose but this article seams a bit old (purge do not exist in the last version of tailwindcss)

add features to `/react-native-tools`

As a client
I can browse /react-native-tools
So that I can discover new tools

---

Take this example https://saasaitools.com/

• #109
• #110
• #116
• #121

Change font

• Next 13 font : inter-font BETA
• Install the font
• Update the project

Reference https://nextjs.org/blog/next-13#nextfont

Og Image

As a social media webiste
I can have a preview with an image
So that people click and visit the website

https://nextjs.org/blog/next-13#og-image-generation

• Og add og:image like #12
• check the result with https://metatags.io/

Add more content on `[slug].tsx` page

• add content
• fix Badge variant gray variations
  • Open Storybook
  • Check text contrast
  • should work on light mode
  • should work on dark mode
• Create a Pricing component
• screenshot page https://api.apiflash.com/v1/urltoimage?url= https://apiflash.com/
• https://saasaitools.com/ai-tools/realfeedback/

`react-native-tools` Update Road to React Book: API

Add 404.tsx

As a user if i am on 404 i need to be able to go back faster

• Add 404.tsx
• Add a button to go back / or go to index
• Add css
• add a gif https://media.giphy.com/media/2Us3kgLA8oVENplJxf/giphy-downsized.gif Do not hotlink the image
  Download with a curl and add it to ./public/

Example:

# 404: Not Found

We took an educated guess and tried to direct you to the right page, but it seems that did not work out! Maybe it doesn't exist anymore! 😔

Return Home

.eslint cache

Add eslint cache to .gitignore to avoid git cz crash

SEO better metadata

Is your feature request related to a problem? Please describe.
Bump Next.js to the last version...

Describe the solution you'd like
and migrate to the last metadata API for a better SEO

https://nextjs.org/blog/next-13-2#built-in-seo-support-with-new-metadata-api

`/onboarding` form

Is your feature request related to a problem? Please describe.
The contact touchpoint does not sparks joy

Describe the solution you'd like
Open in a new page

Additional context

• https://twitter.com/jamesm/status/1614938156830232579?s=46&t=NRssjlHOJNIQfvIJJX7oWw

external links should open on `target="_blank"` and have an icon

Describe the bug

• add https://github.com/tailwindlabs/heroicons
• add icon
• create a component <Hyperlink> -> render a <a {...props}>
• add a props <Hyperlink isExternal>

To Reproduce
on the footer

Expected behavior

Screenshots
If applicable, add screenshots to help explain your problem.

fix layout

add Layout to IndexPage

`og:image` add tailwind

Is your feature request related to a problem? Please describe.
Not really but the quality of our og:images is meh

Describe the solution you'd like
Add tailwind to have nice looking image

• the font-family need to be inter

Additional context
Read this article https://prismic.io/blog/vercel-og-image-randomized

example
https://www.ogimage.gallery/og-images/nuro-dev

add a new nextjs app `figmatostore`

As a user
I can visit an up-to-date version of https://figmatostore.com/
So that buy the last version of the UI template

---

• create a new nextjs app with Nx
• update the Button component on the design system from the github repo figmatostore
• add a new index page
• add the gumroad payment link
• ship to vercel

Add issue and pr template

hack content from https://github.com/commaai/openpilot/tree/master/.github

• config.yml

blank_issues_enabled: false
contact_links:
  - name: Public AMA
    url: https://twitter.com/intent/follow?screen_name=flexbox_
    about: For open questions and discussion
  - name: Slack Community
    url: https://weblille.rocks/
    about: Our french programming and indie hackers community

Migrating to `cva`

Is your feature request related to a problem? Please describe.
Our current way to handle variants works, but it's a bit hacky and does not scale.

Describe the solution you'd like

• add cva
• double check the storybook configuration —we should be able to modify the props on https://design.weshipit.today/?path=/story/badge--primary
• migrate button.tsx
• migrate text.tsx

Additional context

• watch this talk Building a design system in Next.js with Tailwind

add `git-cz` for changelogs

As a developer
I can use git cz to commit
So that all the comments have the same look

• install https://github.com/commitizen/cz-cli

on package.json

  "git-cz": "^4.9.0",


  "config": {
    "commitizen": {
      "path": "git-cz"
    }
  },

`react-native-serverless-api` Feedback

• #38

Data Layer

• wire Airtable GraphQL API

UI Component

• #68

remplace

Welcome to Slug!

Like https://weshipit.today/react-native-serverless-api/realm
Example https://web.archive.org/web/20220129045838/https://www.lemstash.com/tool-elements/lemlist

• Add a custom component to display data by @AlexSwtlsk https://web.archive.org/web/20220129043536/https://www.lemstash.com/tools
• Make mobile friendly.
• "*resources"

Call to action

• CTA to the top.
• add a call to action in the footer

https://github.com/flexbox/next.davidl.fr/blob/master/src/components/Magic/Footer.tsx

`react-native-tools` Launch on Product Hunt 🚀

• read https://www.producthunt.com/launch
• Create a teaser page example https://www.producthunt.com/products/roundup-2
• hack this https://www.producthunt.com/products/lemstash

D-Day

Website

• Add a upvote badge on the website

Twitter

• create a thread mentioning all companies products
• share the thread on https://twitter.com/i/communities/1509407040095068166
• DM 1to1 friends https://www.producthunt.com/@flexbox/following

reddit

• on Firefox ScreenShot the page
• Create a post "React Native Ecosystem 2023" like this one
• post on https://www.reddit.com/r/selfpromotion/
• post on https://www.reddit.com/r/webdev/
• post on https://www.reddit.com/r/Frontend/
• post on https://www.reddit.com/r/SideProject/
• post on https://www.reddit.com/r/product_design/
• post on https://www.reddit.com/r/AppIdeas/
• post on https://www.reddit.com/r/IMadeThis/
• post on https://www.reddit.com/r/ProductHunters/
• post on https://www.reddit.com/r/new_product_launch/
• post on https://www.reddit.com/r/nichewebsites
• post on https://www.reddit.com/r/internetisbeautiful

Slack

• add to #rn-newsletter infinite.red
• add to #cool-links community
• add to #vos-actualites-a-partager Human Coders

Discord

• add to #feedback on stepzen

web

• https://news.humancoders.com/
• https://kitt.lewagon.com/knowledge/resources/new
• https://www.linkedin.com/groups/8364861/
• https://www.facebook.com/groups/269791096696285
• https://www.facebook.com/groups/586400221495560

run test on every PR

As a developer
I can have feedback when my PR is opened
So that I do not merge broken monorepo

---

Context
with #46 we introduced a broken yarn start
we want to avoid that in the future

Solution
with a github action we should run yarn test

• add a github action for every pull request
• run yarn test

Polymophic button

As a dev
I can use the as props for button
So that i can use nextjs router pr not

https://twitter.com/glnnrys/status/1635370971204034561?s=46&t=nPB-wHoCl6eDg0cK1HjD3g

Homepage

Describe the bug
Button and padding

To Reproduce

fix all UI snags

• I would say it lacks a bit of space (between the subtitle and the search bar, the left menu, and the content).
• The font size is a bit too big for my taste.
• The colors of the menu are a bit "Christmas tree" for my taste, and they are not found elsewhere, something more neutral could be nice.
• Create a Pricing component
• The filters on the left, when active, do not change their design. They require a style (a border with a darker color or something else) to distinguish them from inactive filters.
• The Reset button should have a different style. It blends too much with the filters, in my opinion.

Add love to ApiCard

add `/react-native-api` page

As a visitor
I can add a new api
So that I contribute to the listing

• Add a page /react-native-api
• embed https://airtable.com/shrcF4Xn27rhIZVCs/tblpNvaodZH5S99le
• add a button "Add a new API" https://airtable.com/shrKPA2DGcG8xnQGG
• #36
• #35

Color for <Text> component

color : "blue" | "green" | "black" |

SEO phase 2

Is your feature request related to a problem? Please describe.
add SEO props like https://davidl.fr/

Additional context

• Create an account on https://surferseo.com/

Automated Quality tools

• add https://github.com/okonet/lint-staged
• eslint-plugin-tailwindcss https://github.com/francoismassart/eslint-plugin-tailwindcss

add `og:image` with apiflash.com

As a social media user
I can see a preview on the website as an image
So that I want to click

• add https://apiflash.com/

`og:image` do not work

Describe the bug
link to https://weshiptit.today/api/og?title=Helping you to ship your vision in production
does not work

To Reproduce
open https://weshipit.today/consulting

Expected behavior
the meta og:image should output an image

Additional context
Double check the end result with https://metatags.io/

Solution

• use only next-head to generate images and double check with this https://vercel.com/docs/concepts/functions/edge-functions/og-image-generation

bump to `next@13`

• nx migrate
• https://nextjs.org/blog/next-13
• Og add og:image like #12

bump storybook 7.0

nx g @nrwl/storybook:migrate-7

Add StepZen

As a dev
I can use StepZen
So that I have access to airtable API

---

• stepzen endpoint https://graphql22.stepzen.net/api/22ab50410d605e68703a0fbd86140380/__graphql
• vercel secrets
• add apollo client

better customer list on homepage

As a user
I can see customers list
So that I can browse the entire list client

---

• rename to customer

hack this

from https://expo.dev/home

better content for `react-native-api`

• add Logo
• double check copywriting

https://weshipit.today/react-native-serverless-api

better deploy to vercel with `nx affected`

Have a look at

https://egghead.io/lessons/nx-only-deploy-to-vercel-what-has-been-affected-using-nx

More Useful Resources

On https://weshipit.today/react-native-tools
and https://weshipit.today/react-native-tools/bugsnag

Add something like this

with a link to https://flexbox.gumroad.com/l/expo-checklist

Favicon

As a visitor
I can see the favicon
So that I can quickly identify the website

---

• use Favicon Generator with 🚢
• add a favicon https://dev.to/jcubic/favicon-for-next-js-and-typescript-9gk

`vercel` x `nx`

As a dev
I can use the official way to ship nx to vercel
So that I can have benefits like nx affected

https://vercel.com/docs/monorepos/nx#using-nx-ignore

better homepage design

• Perhaps you could add some inline imagery? e.g. https://www.oishee.io/
• I'd decrease the font weight to 600 to make it easier to read.
• Increase the line height to 1.1 to aid readability.
• Change the colour of your Twitter links to blue to differentiate them from the other text and for consistency with your client link at the bottom of the page.
• Currently the client logos are different shades of grey. Suggest updating them to the same shade, preferably with at least 3:1 contrast ratio.
• I'd also add a line separator above the client logos.
• Would be great to see some of your previous client work too.

`/consulting` add video

like here https://www.awalldigital.com/ or https://avnier.com/pages/methode
on https://weshipit.today/consulting