Am a beginner developer trying to better understand how NextJS works, and am having some trouble with my project and data fetching.
To keep things simple: I am building a Pokemon 'team builder', where users can select Pokemon, add their moves and abilities etc, and add them to a team.
There are over 800+ Pokemon, and a open-source api project called PokeAPI, has all the data possibly needed for all and each Pokemon.
I have dropdowns (using a component library), with search features that I am using for users to select Pokemon and add its info.
Depending on which Pokemon is selected at a time, I would like to fetch its unique data from either the PokeAPI, my database, or somehow a local JSON file, but I am not sure at all which is best and most efficient/optimal. I do not want to constantly have users query the PokeAPI, and also doesnt feel necessary since the Pokemon data is pretty consistent throughout the years.
How would I be able to fetch individual JSON files in my project instead? Would I save a 'pokemon' folder in my /public directory and have a JSON file for each pokemon 1.json etc? And if so how is this possible with NextJS? Would I just do something like import? Or how would each single JSON file be imported upon client request? Would the server be getting the files and serving it on request, or is it all bundled because its on my public directory on build time?
Related
Ok... I am so confused. I am new to React Native and I have created a simple mobile app that shows a list of news (containing a specific image, title, and description). I have a lot of experience with programming most of which comes from game development. I have created many games and I am familiar to cloud storage systems that you update and retrieve data.
Right now I just have a local json file with an array of 'news' Objects and then I loop through this array to show the news posts. Basically, I want to move this json file to somewhere online where the app just retrieves it. This would make it so that the News json file could be edited in order to change, add or remove new news. So, I don't need account or anything. I don't even need to be able to set/update data from the app. I just need a place to store images and files that can be retrieved from the app.
I have tried using the common react native data base systems like sqlite, realm, mongodb, and firebase, but must not understand how they work because they make no sense. Also, it seems like when making a mobile app all of these services require you to setup a backend and start a server, which from what I can tell doesn't work on mobile... It seems logical that there would be a global data base that I could store storage on and just receive it by a simple fetch or network call. Am I totally crazy here ?:) Any help or guidance is super appreciated. Thanks.
I have this big issue.
I have developed a Gatsby website for the car parts market.
The users can select car model and part type and receive a page with the parts for their specific car.
I have used React Route to create dynamically the new path and an API that recall the data:
https:/mysiteAPI.com/{car.id}/{part.id}
The paths that will be created are something like that: https:/mysite.com/comparison/{car.name}-{part.name}
The big issue that I have is that this path will be created only when i click on
Using this approach I can not generate the pages when I build the website, but the pages will be generated only when users click.
Actually I need that pages will be readable from search engine crawlers for SEO reasons.
I tried to create each page inserting in Gatsby Node a CreatePage, but the system crashed, due the huge amount of pages (over 5 million).
I don’t know how to generate pages that can be readable by crowler and persist. I hope that someone of you can help me to improve my site.
Thanks in advance
Take a look at the createPages API, available in the gatsby-node file of your project. If you would like to create static HTML files in the build process for each item you need to first fetch them somehow. With the data in your possession you could iterate over it and call createPage for each page you want to create.
i have a quick question, so i just built 3 websites for customers using React and they're all deployed and working but now one of these customers is asking me how they can update its content, all the website are stored either on one or many JS files after building them with npm run build and configured with webpack, how should i build a website where customers plan to change either texts or add new images? the websites have a couple of map functions to display many pictures or card based on products, so everytime theres a change i have to go through the react files and change them build it again and deploy them which seems pretty static to me even though React is supposed to work with components and make it dynamic, what would be the best approach and/or tools to build a website where a customer can change a .JS file with text in Cpanel file manager, or just add pictures to a directory in Cpanel file manager and have it render automatically, i was thinking that i should make it server side so i can avoid having to re build and re upload everytime that there are changes, bu what would be the best options besides React to make it dynamic, Should i use node, express??
Thank you so much for your time !
One of the options could be Contentful API, you can store all of your data there and add permission to your customer to edit the repo. This will make it easier to change the content that you mentioned: "the websites have a couple of map functions to display many pictures or card based on products". So what you will do is simply fetch data from the API and render it on your website, this will allow your Customers to CRUD the content of your website, without your intervention. It is pretty easy to use, you can find out more about it here: https://www.contentful.com/developers/docs/.
Regarding the content of the website itself, e.g pages, texts on pages, and other static stuff that does not depend on actual data, but it's only a part of your code, I think it could be hard to manage without you coding it manually. If there is an exact part of content data that is going to be changed, you could make a new Admin page, where the user will be able to change the content and data on your website, and in this could you will have to add some back-end (node, express, etc). But what you're describing is actually CMS which is really popular nowadays you might want to take a look at some of them:
https://www.wix.com/
https://wordpress.com/
But if the Texts that you've mentioned are just a part of models e.g You have a product with something like this:
const product = {
productName: 'name',
price: '100',
image: 'img',
avialable: false,
}
and clients want to change productName, price, image, avialability then Contentful is pretty sufficient for you. If you will need some help with this Platform you can DM me I will try to help you.
I currently have a GatsbyJS app that is using Netlify CMS (NCMS) for content management and Netlify via GitHub for hosting/deployment.
I would like to build a very simple order form system, but I would like to use JSON files and NCMS collections to represent the data because I will have very minimal data requirements and I would like the ability to have the data administered entirely through NCMS.
For example, I have a Products collection and an Orders collection. Products is using a JSON extension and contains JSON files that represent each product. Everything is looking good there. For Orders, I want to be able to create new entries from NCMS OR from an order form in my app.
Creating Orders entries in NCMS should be simple enough using the relation widget to incorporate a Products entry into each order. What I'm trying to figure out is how I can create JSON files in my filesystem (repo) upon form submission. I assume this is possible in some way with GitHub webhooks because NCMS is doing this when you create files in their system.
Can I, using some combination of Netlify's Forms API, Netlify Functions and/or GitHub webhooks, create a file in my GitHub repository when a user submits a Netlify Form in my app?
If this isn't possible, my follow up strategy would be to save Orders data in a MongoDB database. I do not have any experience yet with Mongo, but I know it's based around a "flat" data format using a JSON like syntax. Could I possibly save my order data in a Mongo collection upon submission via a Netlify Lambda function, then trigger a build via Netlify, and in my app pull in Mongo data at build time, and somehow create a file for each order object, perhaps via Gatsby's API?
My last resort would be to set up an admin area of my app where orders could be viewed, modified, and deleted. I'd prefer to avoid this because a) I do not have Netlify Pro services and thus do not have access to password protected site access (though I'm not sure how NCMS utilizes Identity and is able to avoid the premium plan?), and b) I would like all data administration to occur through the same platform (Netlify CMS).
You can definitely do this with Netlify Form, Function & Github API. I've done something similar for one of my gatsby sites, where form data is submitted directly to a Netlify function.
If you'd like to take advantage of Netlify Form's features like spam prevention & email notification, I think it'll look something like this:
Set up your Netlify Form
Set up a Netlify function that listens to the submission-created event. In the body of the request, you'll find a payload object that contains the form data, as well as info about your site (in case you have a bunch of them).
Netlify has a package that really ease up the development process.
Trigger a call to Github API to either create a file for that submission or update an existing file that contains all submissions.
At this point, you can set up netlifyCMS to read the content of that folder / file & allow admin to review / modify the submissions.
Hope it helps!
I need to make a "gallery" like Google Photos for a class project. My idea consists in a web app that allows a user to upload a file (image) and save it to a db and after that to show it in the web app. I just want to know how should the structure of my collection be if that collection saves a file (<16MB I read for >16MB we have to use gridfs).
For the back-end, I will use Node (with Express, Mongoose ... and so on) and for the front-end I will use react or vue.js. I am not sure yet.
Any suggestion is accepted.
You can do the following two things.
Upload image to s3 and save its link in the mongoDB. More Read(https://medium.com/#fabianopb/upload-files-with-node-and-react-to-aws-s3-in-3-steps-fdaa8581f2bd).
Save image in database in a GridFS collection. More Read
(https://docs.mongodb.com/manual/core/gridfs/#when-to-use-gridfs)