What's up! Thanks for taking the time to go through this project.
You'll need a GIPHY_KEY environment variable set in .env / .env.local
GIPHY_KEY=XXXXXXXXXXXetcThe project is pretty simple, clone, install, npm run dev
Selected profile pictures / history saves to localStorage. Your profile picture is in the top right nav, click to open history dropdown.
Some parts got rough as I ran out of time, like server side validation / pagination / sorting support.
I also would've liked to tinker more with the Giphy API to select the best images to use for the app, but I just used the preview gif url, which seemed fine.
Definitely let me know if you'd like to discuss this project further. Thanks again!
Using the giphy.com API, create an app that accomplishes the following:
- User can search for a gif
- User can select a gif from search results
- Clicking submit will save the gif as a user's PFP (profile pic)
How you save the pfp image file is up to you. One option is to upload to an Adim internal S3 bucket. The
access keys will be provided along with this prompt.
- If you finish within the allotted time and want to do extra credit, feel free to tackle one or more of the below ideas. Or feel free to come up with your own!
- Support a history of pfps for a user, similar to how Facebook allows you to view the history of a user's profile pictures.
- Flesh out the profile page to use more than just a pfp
- Add support for image descriptions to accompany the pfp.
- Clone this repo
- In terminal, run
npm install - In terminal, run
npm run dev - You now have your nextjs app hot-reloading on port 3000
Upload your response to a private Github repository and give access to Alexei and Jared. We should be able to pull your repo and run it locally, just like the instructions above. If running your code has any other dependencies (e.g. API keys), please provide them together with your submission. You can also deploy your app on Vercel (they offer a free plan).
======
This is an app bootstrapped according to the init.tips stack, also known as the T3-Stack.
We try to keep this project as simple as possible, so you can start with the most basic configuration and then move on to more advanced configuration.
If you are not familiar with the different technologies used in this project, please refer to the respective docs. If you still are in the wind, please join our Discord and ask for help.
We also roll our own docs with some summary information and links to the respective documentation.
Also checkout these awesome tutorials on create-t3-app.