instructions to run frontend

README.md

@@ -42,4 +42,23 @@ Instructions to run the backend server
 - Test:
     Run the test suite running: ```npm run test```
 
-## Frontend [WIP]
+## Frontend [WIP]
+
+Tools used to implement the Frontend:
+- React: Create multiple components, and reactive behaviour of them using hooks. 
+- Redux: Handles the global states in the navigation within the app.
+- Yup: Helps to validate forms schemas.
+
+Instructions to run the frontend client
+
+- Enter into the frontend directory: 
+
+        cd frontend
+
+- Deploy on local machine.  
+
+    1. Install the dependencies and devDependencies and to start the client in development environment, run:    
+
+        npm install 
+
+        npm run start

frontend/src/features/movies/MovieReview.jsx

@@ -42,27 +42,28 @@ function MovieReview() {
                 </div>
                 <div className="movie-details">
                     <div className="movie-title">{selectedMovie.title}</div>
-                    <div className="movie-release-date">Release date: {new Date(selectedMovie.releaseDate).toLocaleDateString('en-US')}</div>
+                    <div className="movie-release-date">Release date: {selectedMovie.releaseDate ? new Date(selectedMovie.releaseDate).toLocaleDateString('en-US') : 'NA'}</div>
                     <div className="movie-overview">
                         {selectedMovie.overview}
                     </div>
                     <div className="rating-form">
-                        <h2>Rate the Movie</h2>
+                        <br></br>
+                        <h5>Rate the Movie</h5>
                         <form onSubmit={handleSubmit(onSubmit)}>
                             <label>Rating (1-10):</label>
                             <input type="number" {...register('rating')} id="rating" name="rating" className="rating-input" min="1.0" max="10.0" required></input>
                             <div className="invalid-feedback">{errors.rating?.message}</div>
                             <br></br>
                             <div>
-                            <label htmlFor="commentInput">Add Your Comment:</label>
-                            <textarea
-                                id="commentInput"
-                                rows="4"
-                                cols="50"
-                                value={comment}
-                                onChange={(e) => setComment(e.target.value)}
-                            />
-                        </div>
+                                <label htmlFor="commentInput">Add Your Comment:</label>
+                                <textarea
+                                    id="commentInput"
+                                    rows="4"
+                                    cols="50"
+                                    value={comment}
+                                    onChange={(e) => setComment(e.target.value)}
+                                />
+                            </div>
                             <button disabled={isSubmitting} className="submit-button" type="submit">
                                 {isSubmitting && <span className="spinner-border spinner-border-sm mr-1"></span>}
                                 Rate

frontend/src/index.css

@@ -69,20 +69,7 @@
     font-size: 16px;
     color: #777;
 }
-.star-rating {
-    display: flex;
-    align-items: center;
-}
-.star-icon {
-    font-size: 24px;
-    color: #FFD700;
-    cursor: pointer;
-    margin-right: 5px;
-}
-.star-icon:hover,
-        .star-icon.active {
-            color: #FFD700;
-        }
+
 .submit-button {
     background-color: #007BFF;
     color: #fff;
@@ -91,10 +78,3 @@
     border-radius: 5px;
     cursor: pointer;
 }
-
-.rating-stars {
-    position: relative;
-    cursor: pointer;
-    overflow: hidden;
-    white-space: nowrap;
-}