London10-AfshaHossain-FullStackProjectAssessment-Week3-Level 300 #438
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Tested: Tailwind and it works
Planned solution to level 100 task, created VideoCard component that takes in data from exampleresponse.json, used replace function in the VideoCard component to ensure the watch url is converted to embeded url, displayed the first object from the exampleresponse.json data
Lifted state from CardsContainer to MainContainer. Created a VideoForm component. Created a Button. Started working on the URL validation.
- Displayed video title, embeded video and number of votes from the data in exampleresponse.json
- Made the delete button work
- Created up vote button and down vote button and make them change the rating
- inside the CardsContainer component, calling the videoCard component
- Added the up vote and down vote buttons in the VideoCard component and made them change the rating when clicked
- In the VideoForm component, we used event.target.form.reset(); inside addVideoHandler to clear previous inputs from the field
- also used the following to check validity and give an error if it's a string instead of url:
event.preventDefault();
if (!event.target.form.reportValidity()) {
return;
}
- used the following to give a new id value to the input data that is entered by our client:
parseInt(Math.random() * 1000)
- added icons with up vote, down vote and delete button
- checked lighthouse accessibility is green
- displayed the video in descending order according to the ratings of the video by using sort method over the videoData in CardsContainer
…iles to the client folder Tested: Tailwind is working by changing the header and title font style.
When a user uploads a video we store the date and time that they posted it at. We added when the video was uploaded to the Video React component
Used Tailwind to style the header, the form, section, the cards container and video cards and the elements inside them.
Completed Level 100
…on file inside server folder - added .env file inside .gitignore file - tested .env file - tested get in app and test post route in postman
- added a YouTube logo - added YouTube URL validation - added user friendly error message for sending empty input values, cleaned up the VideoForm.jsx from unnecessary codes - corrected the language of the content inside the browser - added styling using Tailwind - added html path in tailwind.config.js file - removed unnecessary plan.drawio
Displayed the data from the exampleresponse.json by using fs module, readFile method and then gave it a path to the location of the file and the required encoding and parsed it with JSON.parse(data).
Displayed the data from the exampleresponse.json by assigning a variable to the data and using the variable inside the get request.
Used uuid and slice method to make an id of six characters. We destructured title and URL from req.body and validated them. Pushed the new video with the ID to the videos data. Finally, wrapped the id inside the curlies in order to see the property name and its value as response.
Used params object to get the id. We used the find method to return the correct video. Displayed the video that matches the id in the URL.
Used params object to delete by id. We used the find method to return the correct video. THen used indexOf to find the index number of the video to be deleted. Finally used the splice method to remove the video. Displayed {} when successful and the following:
{
"result": "failure",
"message": "Video could not be deleted"
}
when unsuccessful.
Completed Level 200
GET all videos "/" Sandwich fetch inside useEffect. Used optional chaining to avoid the error "sort does not exist on undefined".
POST all videos "/" For POST all videos sandwiched fetch inside if statement in VideoForm component and stringified the newData variable.
Used a new useState variable called fetchData and set it as true or false in the MainContainer to rerender the data after a delete has taken place. Made the delete button work for both the client and the server. Since we have the id already in normal numbers format in our database or exampleresponse.json, to make it consistent with IDs that already exist, we take the highest ID number and add 1 to it to get a new number ID. We generate the ID using Math.max() method. After that I fixed the ID type mismatch in server and the client by making them all converted to number from string.
Tried to connect server and the UI and make the put request work.
Made the upVote and downVote ratings work with the server put request. Added an error message when no videos matched for our update. Corrected the indentations.
Added more options to check the URL validation. Used split method to remove the end of the URL after the "&" so that I can display the videos.
Completed Level 250
We got this error on the render deployment: Sep 11 01:08:36 PM > [email protected] server /opt/render/project/src/server Sep 11 01:08:36 PM > node server.js Sep 11 01:08:36 PM Sep 11 01:08:37 PM internal/modules/cjs/loader.js:888 Sep 11 01:08:37 PM throw err; Sep 11 01:08:37 PM ^ Sep 11 01:08:37 PM Sep 11 01:08:37 PM Error: Cannot find module 'dotenv' I am attempting to solve this by adding the dotenv package to the server/package.json
- Commented out ssl: true - Added sql with the pg library - Added endpoints with express library - Created a pool that connects the server to the SQL database - Wrote SQL queries and sent to database
Uncommented ssl: true as this will be used in production
- Added bodyParser
- Connected .env file with the external server on Render
- Commented out this line: const videos = require("./exampleresponse.json");
Changed http://localhost:5000 to https://afsha-full-stack-video-storage-app.onrender.com
* Correct the validation in POST endpoint by adding && operators instead of || * Correct the validation in POST endpoint by replacing urlObject with url as we are not using !urlObject in our server.js To get the thumbnail right: * Create a variable called formattedUrl that create a new variable from url instead of updating url (not good practice) * Use if statement and find a clever way to format the URL that starts with "https://youtu.be" so that we do not have to redirect the URL
* Update config.js with the new render backend URL which is connected with my elephantSQL
Create a shell script for getting the videos from the command line to create cron job so that we can have the database running daily
* Change the title "React App" to something more specific to the app we created such as "Video Storage App"
Afsha10
force-pushed
the
level-300
branch
3 times, most recently
from
8db09cd to
336c4a0
Compare
Afsha10
force-pushed
the
level-300
branch
3 times, most recently
from
64fd3bc to
f8dba3b
Compare
* Fix the warning below by adding
" with:
node-version: 20"
to Setup NodeJS step
Node.js 16 actions are deprecated. Please update the following actions to use Node.js 20: actions/checkout@v3, actions/setup-node@v2, aws-actions/configure-aws-credentials@v1. For more information see: https://github.blog/changelog/2023-09-22-github-actions-transitioning-from-node-16-to-node-20/.
* Change button text from "Add" to "Add Video"
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.