Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sarpongabasimi/movie
(In progress) Movies is a mini project I embarked on. It uses React and react-router v4 on the front-end supported on the back-end with a node.js application using Express and MongoDB with Mongoose.
https://github.com/sarpongabasimi/movie
Last synced: 28 days ago
JSON representation
(In progress) Movies is a mini project I embarked on. It uses React and react-router v4 on the front-end supported on the back-end with a node.js application using Express and MongoDB with Mongoose.
- Host: GitHub
- URL: https://github.com/sarpongabasimi/movie
- Owner: SarpongAbasimi
- Created: 2019-06-08T20:43:15.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-12-30T17:48:30.000Z (about 2 years ago)
- Last Synced: 2023-03-07T22:39:05.605Z (almost 2 years ago)
- Language: JavaScript
- Homepage:
- Size: 1.19 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Movies.
- ``8th June 2019``.
> This is a mini **project** that I have been wanting to do for a while now. The aim of the project is to allow users to know the latest movies out there, watch movie trailers and read reviews on their favourite movies. I would also like to add a registration and login page to the site so that users can have their own profile pages and manage their favourite movies.
- The aim is to user the ``movie database api`` for this application and hopefully, by the ain of the project, I should have something like this.
Technologies Used So Far.
| TECH STACK |
| :----------: |
| 
|
Challenges.
- The first challenge I faced in this project was getting ``travis`` to turn ✅ after I implemented the function to fetch data from the ``movie db api``. For some reason the build was alsways timing out.
- After a bit of research, I realised that I to called the ``done()`` method in my test to tell ``mocha`` to wait until the promise has been resolved.
```javascript
describe('GET /', ()=>{
it('responds with a json object', (done)=>{
request(app)
.get('/')
.expect('Content-Type', /json/)
.expect(200)
.end((err, res)=>{
if(err){
return done(err)
}
done()
});
});
});
```
How to Use App.
- ``Fork`` and ``clone`` this repo.
- open ``terminal`` and cd into ``movies``.
- ``run bundle install``
Updates.
``15th June ``.
> I finally got time today to work on the movie app and I must say that I have learnt a lot. This is how the app currently looks now. I still have a long way to go to I am happy with the prgress.
> The next step is to add a show page. This page will ``render`` each individual ``movie`` and give more information about it.
- Today, I also learnt about how to ``mock`` api calls when ``testing`` using ``jest spyOn``. This allowed me to test the ``App`` component without making an actual ``api`` call.
```javascript
it('fetches data from the server when component mounts', (done)=>{
const mockedResponse = {"page": 1, "total_results": 19840,};
const mockJsonPromise = Promise.resolve(mockedResponse),
mockFetchPromise = Promise.resolve({
json: ()=> mockJsonPromise
});
jest.spyOn(global, 'fetch').mockImplementation(()=> mockFetchPromise);
const wrapper = shallow(< App/>);
expect(global.fetch).toHaveBeenCalledTimes(1);
expect(global.fetch).toHaveBeenCalledWith('/api/movies/popular/movies');
process.nextTick(() => {
expect(wrapper.find('Nav')).toBeTruthy();
global.fetch.mockClear()
done();
});
done();
});
```
> The done() method is passed to the ``it`` block to tell jest to wait until the async funtion, ``fetch``,is completed before the test ends.
``16th june 2019``.
- I wrote a ``test`` for my custom ``404 page``.
- Implemented a custom 404 page to the application.
> I did this even though, I said i wanted to add a show page.``😝``.
- This is the custom page curretly looks.
> Now unto what, I said I was gonna do for today, add a show page.
``22th june 2019``.
- A lot has changed since the last time I worked on the application.
- I have added routes to the app using ``react-routers``.
- This is how the app currently looks.
- when a user cliks on an movie, the user is taken to a show page.
> The idea behind the show page is to give users information on a selected movie.
Learning.
- I learnt how to pass props to react routers using ``render`` instead of ``component``. **[More Info Here](https://blog.bitsrc.io/must-know-concepts-of-react-router-fb9c8cc3c12)**.
To Dos.
- Add links to Navigation Bar. (done)
``24th June 2019``
- Here is how the app is currently looking.
- I added navigation links, login and signup button to the app.
- The next step is to add a 404 page to the client side.
- Then add the ability for a user to sign up and log in.
- Implement pagination.