This project was completed as part of a group learning exercise. This landing page describes a subscription plan for on demand software development assistance.
https://expertise.netlify.app/
- ✅ User can see the page with the product
- ✅ User can see a list with all the features of the product
- ✅ User can see how this product will improve ther life
- ✅ User can fill out a contact form
- typescript
- react
- remix
- tailwindcss
- filebase
Normally a contact form isn't very exciting. With this form we are storing the submitted data using an S3 compatible object storage. The API is provided by https://filebase.com/ and is backed by an open source decentralized storage network called Sia.
When the form is submitted, a POST request is sent to /contact.
<Form method="post" action="/contact">Note: This is a remix
Formcomponent that wraps a regularform.
We handle that request and send the submitted data to Filebase. This is using the @aws-sdk/client-s3 package.
/* Create an object with using the body data */
const data = {
email: body.get("email"),
reason: body.get("reason"),
};
await client.send(
new PutObjectCommand({
Bucket: process.env.S3_BUCKET,
Key: `waitlist/${uuidv4()}.json`,
/* Convert the data object to store it. */
Body: JSON.stringify(data, null, 2),
})
);The Netlify CLI starts your app in development mode, rebuilding assets on file changes.
npm run devOpen up http://localhost:3000, and you should be ready to go!
There are two ways to deploy your app to Netlify, you can either link your app to your git repo and have it auto deploy changes to Netlify, or you can deploy your app manually. If you've followed the setup instructions already, all you need to do is run this:
$ npm run build
# preview deployment
$ netlify deploy
# production deployment
$ netlify deploy --prod